react-notifications
react-notifications copied to clipboard
error loading notification fonts via webpack
Hi, using webpack to load the css as document and getting this error:
ERROR in ./~/react-notifications/lib/fonts/notification.eot?s3g3t9
Module parse failed: /home/app/node_modules/react-notifications/lib/fonts/notification.eot?s3g3t9 Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
For my webpack config I have:
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loaders: ['babel']},
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
{test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'},
{test: /\.ico$/, loader: 'file?name=[name].[ext]'},
{test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']}
]
},
Any suggestions? Thanks.
You can try my webpack config in example
directory here : https://github.com/vn38minhtran/react-notifications/blob/master/example/webpack.config.js#L109
How I fixed: I used file loader, to move font files to public path. With my configuration, no public path, a fonts folder is created, and the font files are stored inside him. So, the publicPath parameter says to use app base path as reference, working well
{
test: /\.(ttf|eot|svg|woff(2)?)(\S+)?$/,
loader: 'file-loader?publicPath=/&name=fonts/[name].[ext]'
}