If you are having problems with Webpack that produce the following errors:
Module not found: Error: Cannot resolve module 'some_module_name' in 'path/to/your_file'
Then, here are the steps to fixing it:
First, run Webpack with the ‘–display-error-details’ like so:
webpack --progress --color --watch --display-error-details
In my case, webpack is automatically run when I run npm run dev, so I had to update the webpack command in my package.json file with ‘–display-error-details’.
Now when you run Webpack, you’ll get a far clearer idea of what is actually wrong. Here are some possible issues / fixes:
npm install --save missing_module_name(replace ‘your_module_name with the actual module’s name) just to be sure.
npm cache clean && rm -rf ./node_modules && npm install.
My specific error and how I fixed it:
Whenever I ran npm run dev, I would get the following error trail:
ERROR in ./front/client/front_desk.jsx Module not found: Error: Cannot resolve module 'react' in ...path_to/front_desk.jsx
but that wasn’t it, I was getting this for all 3rd party modules I was importing from even though they were installed correctly.
Finally, after some digging, I found that we could get more verbose errors out of Webpack by adding the –display-error-details flag. What’s awesome about this flag is that Webpack will list all the paths it used to find the missing module. In my case these were:
[../node_modules/react.js] [../node_modules/react.jsx] [../node_modules/react.js] [../node_modules/react.jsx] [../node_modules/react/index.js] [../node_modules/react/index.jsx] [../node_modules/react/react.js.js] [../node_modules/react/react.js.jsx]
So, there was something wrong with how I was telling Webpack to resolve file extensions. I was using:
extensions: ['.js', '.jsx'],
when it should have been
extensions: ['', '.js', '.jsx'],
which, fixed the problem.