React: "react-scripts start" cannot find module webpack

Question

I am getting this error when I am not even using webpack in this particular branch. I have never encountered this error in my main branch before. However, I wanted to learn webpack so I created a webpack branch of my project and install webpack in that branch(Assuming that I did correctly install webpack locally). Now when I switch back to my main , and tried to run " npm start ". I am getting into this error.

> react-scripts start

module.js:550
    throw err;
    ^

Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\pzheng\my-app\node_modules\webpack-dev-server\lib\Server.js:22:17)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)

When I tried to run "npm run build", this error appears instead:

Error: Cannot find module 'webpack/lib/Chunk'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\pzheng\my-app\node_modules\extract-text-webpack-plugin\dist\index.js:17:14)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\pzheng\my-app\node_modules\extract-text-webpack-plugin\dist\cjs.js:3:18)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)

Many SO posts suggesting downloading webpack, but I do not wish to use webpack for this branch, so many SO posts are not helpful.

What I have tried: I checked my package.json file , there is no webpack dependency in my main branch. However, I do see webpack in my package.lock.json file when I search for the word webpack

What I am using: I am using create-react-app library.

What I need help with: I am trying to figure out the cause of this error and how to fix it. Does it have to do with me installing webpack in the other branch?

Answer 1

I faced this when I was trying to use react-scripts in an existing react app that wasn't scaffolded using create-react-app . The problem was the package-lock file. Deleting node_modules and package-lock.json and running npm install did the trick for me.

Answer 2

Ok, this is weird but this is how I fixed it.

I think this error has to do with "react-script"

I was using react-script@1.3 , as soon as I upgrade my react script to 2.1.3 , which is the latest version published 4 days ago, this error is fixed.

Answer 3

You are using CRA (Create React App) which is already using webpack (with it's own config file). CRA offers the option to 'eject', which will expose the webpack config file that you can then modify and play with. If you do choose to eject, do so on another branch (in case you decide to go back). Be aware that ejecting is non-reversible.

Hope this helps!