Webpack Missing Module 'Module Not Found'

Question

I'm currently working on a react webpack babel etc site and trying to build the first time. The build is successful, but when I open up the browser I get the following error:

Uncaught Error: Cannot find module "/Users/michael.nakayama/Documents/Development/jamsesh/node_modules/webpack/node_modules/node-libs-browser/node_modules/process/browser.js" 

This module exists. Going to that actual url in my browser shows the file in question. But I cannot figure out why webpack cannot find it. I don't know if this is a babel6 issue or a webpack issue, or neither. My config file looks like this:

var webpack = require('webpack'); var cleanWebpack = require('clean-webpack-plugin');  var ignore = new webpack.IgnorePlugin(new RegExp("/(node_modules|ckeditor)/"))  module.exports = {   devtool: 'inline-source-map',   entry: './lib/client/entry',   output: {     path: __dirname + '/public/js',     filename: 'app.js',     publicPath: 'http://localhost:8081/js/',   },   plugins: [     ignore,   ],   resolve: {     extensions: ['', '.js'],     moduleDirectories: ['./node_modules']   },   module: {     loaders: [       {         test: /\.js?$/,         loaders: ['babel-loader?presets[]=react,presets[]=es2015,plugins[]=transform-es2015-classes,plugins[]=transform-react-jsx'],         exclude: /(node_modules)/,       }     ]   } } 

and my webpack server file is as follows:

var WebpackDevServer = require('webpack-dev-server');  var webpack = require('webpack'); var config = require('../../webpack.config');  var server = new WebpackDevServer(webpack(config), {   // webpack-dev-server options   publicPath: config.output.publicPath,   stats: { colors: true }, });  server.listen(8081, 'localhost', function() {}); 

and here are the packages I have installed:

"devDependencies": {     "babel-cli": "^6.3.17",     "babel-core": "^6.3.26",     "babel-loader": "^6.2.0",     "babel-plugin-syntax-jsx": "^6.3.13",     "babel-plugin-transform-es2015-classes": "^6.4.0",     "babel-plugin-transform-react-jsx": "^6.3.13",     "babel-preset-es2015": "^6.3.13",     "babel-preset-react": "^6.3.13",     "body-parser": "^1.14.2",     "clean-webpack-plugin": "^0.1.5",     "express": "^4.13.3",     "history": "^1.17.0",     "jade": "^1.11.0",     "nodemon": "^1.8.1",     "path": "^0.12.7",     "pg": "^4.4.3",     "react": "^0.14.6",     "react-dom": "^0.14.3",     "react-hot-loader": "^1.3.0",     "react-router": "^1.0.3",     "webpack": "^1.12.9",     "webpack-dev-server": "^1.14.0"   } 

entry.js:

var React = require('react'); var ReactDOM = require('react-dom'); var ReactRouter = require('react-router'); var Router = ReactRouter.Router; var Route = ReactRouter.Route; var routes = require('../routes');  // -v x.13.x /**Router.run(routes, Router.HistoryLocation, function (Handler, state) {   React.render(<Handler/>, document.getElementById('react-app')); });**/  var node = document.getElementById('react-app'); // -v 1.0.0 ReactDOM.render(<Router history={createBrowserHistory()} routes={routes}/> , node); 

Also as a heads up, I have tried uninstalling and reinstalling all my packages. I have tried installing specifically the node-libs-browser modules. thanks.

Answer 1

The problem with ignore plugin on node_modules. In webpack.config.js, you have:

var ignore = new webpack.IgnorePlugin(new RegExp("/(node_modules|ckeditor)/")) ... plugins: [   ignore, ], 

From Ignore Plugin documentation:

Don’t generate modules for requests matching the provided RegExp.

Webpack tries to require module with the name node_modules/process/browser for React module and fails with it because it is ignored.

Try to remove node_modules from Ignore Plugin or write less global condition if you really need this.

Answer 2

Importing nodeExternals worked for me.

import nodeExternals from 'webpack-node-externals'; 

this is my server.webpack.config:

import path from 'path'; import nodeExternals from 'webpack-node-externals'; // changes  const CONTEXT = path.join( __dirname, "../.." ),   INPUT_SERVER_DIR = path.join( CONTEXT, "server" ),   OUTPUT_SERVER_DIR = path.join( CONTEXT, "dist/server" );  export default [   {     name: 'server',     target:  'node',     context: INPUT_SERVER_DIR,     node: {       __dirname: false     },     entry: './server',     devtool : 'source-map',     output: {       path: OUTPUT_SERVER_DIR,       filename: "server.js"     },     module: {       rules: [         {           test: /\.js$/,           exclude: /node_modules/,           loader: "babel-loader"         }       ]     },     resolve: {       extensions: ['.js']     },     **externals : [ nodeExternals() ]**   } ];