Module not found: Error: Cannot resolve module 'react' when I use webpack

Question

would really appreciate help on this one: I'm unable to build using webpack, I get a short list of errors starting with:

Module not found: Error: Cannot resolve module 'react' in ../client/front_desk.jsx

and then ending up with a long list that looks like:

Module not found: Error: Cannot resolve 'file' or 'directory' ../node_modules/process/browser.js

Here's my webpack.config.js:

const webpack = require('webpack');
const commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
  entry: {
    front_desk: './front/client/front_desk',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  output: {
    path: 'front/public/js',
    filename: '[name].js', // Template based on keys in entry above
  },
  module: {
    loaders: [
      {
        test: /\.(jsx|js)?$/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react'],
        },
      },
    ],
  },
  plugins: [commonsPlugin],
};

And my .babelrc:

{
  "plugins": ["syntax-jsx"],
  "presets": ["react", "es2015"],
}

And my dependencies list in package.json:

  "dependencies": {
    "aguid": "*",
    "babel-plugin-syntax-jsx": "*",
    "babel-preset-es2015": "*",
    "babel-preset-react": "*",
    "babel-register": "*",
    "bcrypt": "*",
    "eslint": "*",
    "eslint-config-airbnb": "^8.0.0",
    "eslint-plugin-import": "^1.6.1",
    "eslint-plugin-jsx-a11y": "^1.0.4",
    "eslint-plugin-react": "^5.0.1",
    "hapi": "*",
    "hapi-react-views": "^7.0.0",
    "inert": "*",
    "isomorphic-fetch": "*",
    "mailparser": "*",
    "mandrill-api": "*",
    "mongodb": "*",
    "nodemon": "*",
    "react": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-redux": "*",
    "redux": "*",
    "redux-thunk": "*",
    "twilio": "*",
    "vision": "*",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {
    "babel-core": "*",
    "babel-loader": "*",
    "faucet": "*",
    "jsx-loader": "^0.13.2",
    "nodemon": "*",
    "tape": "*",
    "webpack": "*"
  }

Vishal Patel · Accepted Answer · 2016-05-04 19:55:42Z

18

Figured it out! I first ran webpack with --display-error-details, which in my opinion should just be on by default all the time. webpack --progress --color --watch --display-error-details.

This told me that the reason webpack was having such a hard time was because there was something wrong with the extensions I told it to look for:

  resolve: {
    extensions: ['.js', '.jsx'],
  },

Would look for react.js.js and react.js.jsx instead of just react.js. So, I had to update that to:

  resolve: {
    extensions: ['', '.js', '.jsx'],
  },

Which fixed it! =)

answered May 4, 2016 at 19:55

Vishal Patel

4641 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roman M. Koss Over a year ago

Hidden documentation is always hidden and explored by luck, experience with some mix of logic and wasted cups of coffee. Thank for sharing it!

Collectives™ on Stack Overflow

Module not found: Error: Cannot resolve module 'react' when I use webpack

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related