How to fix Webpack when it can’t find your modules

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:

  • There may be a typo in your webpack.config – make sure everything looks right. Check it twice.
  • Your webpack.config could be missing a key detail / config. This was ultimately what was causing the error for me (details below).
  • If the module that Webpack is unable to find was written by you, make sure that the file names don’t have any trailing spaces. For example, it is very difficult to see the difference between ‘myfile.js’ and ‘myfile.js ‘. The latter has a space after it.
  • If Webpack is unable to find a third-party module such as react or redux, make sure that it is actually installed. Run npm install --save missing_module_name (replace ‘your_module_name with the actual module’s name) just to be sure.
  • As a last ditch Hare Krishna! / Hail Mary! / Hail Pasta!, you can try cleaning out and reinstalling your modules: 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:


So, there was something wrong with how I was telling Webpack to resolve file extensions. I was using:
resolve: {
extensions: ['.js', '.jsx'],

when it should have been
resolve: {
extensions: ['', '.js', '.jsx'],

which, fixed the problem.


  • James Chapman

    Thank got I found this article. I’ve been tearing my hair out for a solid day on this issue and all it took was add a blank extension to resolve.extensions? Madness! Thanks again.

  • Palemoon

    Thank you for fixing of such problem!
    “–display-error-details” is very helpfull!
    I’ve found, that I had a mistake in webpack config file:
    extensions: [‘.js’, ‘,jsx’],

  • Brandon Aaskov

    Thank you! Honestly, displaying the error details was enough for me to figure it out. My particular issue was that I listed extensions without the period before it.
    resolve: {
    extensions: [‘ts’, ‘tsx’, ‘js’, ‘json’]

    resolve: {
    extensions: [‘.ts’, ‘.tsx’, ‘.js’, ‘.json’]

  • Vishal

    Sweet! You’re welcome! I’m glad the article helped!

  • keerthi Gowda

    Many Thanks, This post really Helped to solve my issues.

  • Sebastian

    Aweeesssomeee!!! The debug flag saved my life!

  • Vishal

    Haha, awesome! 🙂
    It’s pretty sweet to see that people are still finding this useful after all this time!

Leave a Reply

Your email address will not be published. Required fields are marked *