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