node.js - Webpack and Font Awesome - Cannot find module 'style!css!less!./font-awesome-styles!./font-awesome.config.js? -
i'm using react yeoman: https://github.com/kriasoft/react-starter-kit reactjs project , trying add font awesome project. git project comes node server (npm start). added font-awesome (https://www.npmjs.com/package/font-awesome) , font-awesome-webpack (https://www.npmjs.com/package/font-awesome-webpack) required loaders. here webpack.config.js file:
module: { loaders: [ { test: /\.jsx?$/, include: [ path.resolve(__dirname, '../node_modules/react-routing/src'), path.resolve(__dirname, '../src'), ], loader: 'babel-loader', }, { test: /\.scss$/, loaders: [ 'isomorphic-style-loader', 'css-loader?' + (debug ? 'sourcemap&' : 'minimize&') + 'modules&localidentname=[name]_[local]_[hash:base64:3]', 'postcss-loader', ], }, { test: /\.json$/, loader: 'json-loader', }, { test: /\.txt$/, loader: 'raw-loader', }, { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/, loader: 'url-loader?limit=10000', }, { test: /\.(eot|ttf|wav|mp3)$/, loader: 'file-loader', }, // url-loader uses dataurls. // file-loader emits files. { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } ], },
here i've added font-awesome-webpack - app.js:
import react, { component, proptypes } 'react'; import emptyfunction 'fbjs/lib/emptyfunction'; import fontawesome 'font-awesome-webpack'; import s './app.scss'; import header '../header'; import mainmenu '../mainmenu' import feedback '../feedback'; import footer '../footer'; class app extends component { static proptypes = { context: proptypes.shape({ insertcss: proptypes.func, onsettitle: proptypes.func, onsetmeta: proptypes.func, onpagenotfound: proptypes.func, }), children: proptypes.element.isrequired, error: proptypes.object, }; static childcontexttypes = { insertcss: proptypes.func.isrequired, onsettitle: proptypes.func.isrequired, onsetmeta: proptypes.func.isrequired, onpagenotfound: proptypes.func.isrequired, }; getchildcontext() { const context = this.props.context; return { insertcss: context.insertcss || emptyfunction, onsettitle: context.onsettitle || emptyfunction, onsetmeta: context.onsetmeta || emptyfunction, onpagenotfound: context.onpagenotfound || emptyfunction, }; } componentwillmount() { this.removecss = this.props.context.insertcss(s); } componentwillunmount() { this.removecss(); } render() { return !this.props.error ? ( <div> <header /> {this.props.children} <mainmenu /> <feedback /> <footer /> </div> ) : this.props.children; } } export default app;
the issue when try start node server npm start error:
> babel-node tools/run start [19:29:11] starting 'start'... [19:29:11] starting 'clean'... [19:29:11] finished 'clean' after 28 ms [19:29:11] starting 'bound copy'... build/package.json [19:29:11] finished 'bound copy' after 151 ms ran font awesome styles loader webpack built a9402beaa4a53003a36f in 7013ms child time: 7013ms asset size chunks chunk names 32400f4e08932a94d8bfd2422702c446.eot 70.8 kb [emitted] 0a67745be38d4caa6e00f14e13892f8b.eot 82 bytes [emitted] db812d8a70a4e88e888744c1c9a27e89.woff2 66.6 kb [emitted] a35720c2fed2c7f043bc7e4ffb45e073.woff 83.6 kb [emitted] a3de2170e4e9df77161ea5d3f31b2668.ttf 142 kb [emitted] f775f9cca88e21d45bebe185b27c0e5b.svg 366 kb [emitted] main.js?a9402beaa4a53003a36f 3.45 mb 0 [emitted] main child time: 6469ms asset size chunks chunk names server.js 224 kb 0 [emitted] main server.js.map 207 kb 0 [emitted] main webpack: bundle valid. error: cannot find module 'style!css!less!./font-awesome-styles!./font-awesome.config.js' @ function.module._resolvefilename (module.js:325:15) @ function.module._load (module.js:276:25) @ module.require (module.js:353:17) @ require (internal/module.js:12:17) @ object.<anonymous> (/node_modules/font-awesome-webpack/index.js:1:1) @ module._compile (module.js:397:26) @ object.module._extensions..js (module.js:404:10) @ module.load (module.js:343:32) @ function.module._load (module.js:300:12) @ module.require (module.js:353:17)
i've googled , searched many different forums , sites suggested there issue webpack loader configuration have adjusted different regexs , still got same error. appears loading font files shown "bundle valid". appreciated.
Comments
Post a Comment