Having trouble with webpack

I’ve never had any major problems with webpack before but now for some reason it can’t find any of my dependencies, like react and react-dom for example. Every time I try to create a build, it throws this error:

ERROR in ./src/app-client.js
Module not found: Error: Cannot resolve module 'react' in C:\Users\Chivy\Projects\nightowls-app\src
 @ ./src/app-client.js 3:13-29

ERROR in ./~/react-dom/lib/ReactDOM.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../AppData/Roaming/npm/node_modules/webpack/node_modules/process/browser.js in C:\Users\Chivy\Projects\nightowls-app\node_modules\rea
 @ ./~/react-dom/lib/ReactDOM.js 1:0-100

ERROR in ./~/react-router/lib/Router.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../AppData/Roaming/npm/node_modules/webpack/node_modules/process/browser.js in C:\Users\Chivy\Projects\nightowls-app\node_modules\rea
 @ ./~/react-router/lib/Router.js 1:0-100

After looking at the webpack error logs, it seems that it’s skipping a directory to get to the files. For example, instead of going into a folder before looking for a .js file, it will just ignore the folder and look for the .js file. I’ve never had a problem like this before. I used pretty much the exact same configuration for the voting app, and had no problems. Here is a link to my github repo: https://github.com/codefu-chivy/nightowls-app
Thanks in advance.

1 Like

Hi there! Are you sure you didn’t change webpack config file? Also you should add node_modules directory in your .gitignore. How do you usually run project - if you do npm run start - there is no scripts.start in your package json

Well for some reason i had to remove the .js file extension from the “apps-client” because it couldn’t find the file. It’s also strange because I never had to do this before. My start script is usually the server, but I just wanted to test webpack before I got started on it. I usually run webpack from the terminal. Might the missing start script have something to do with it? Thanks for the advice by the way.

I’ve heard webpack is difficult to configure. Why are you not using create-react-app to bootstrap your React projects? It makes things a lot easier and you don’t even have to deal with configuring anything. Babel, live reload, React & React Dom, Webpack, everything is setup for you.

Also a good idea to add the node_modules folder to your .gitignore file but this is done automatically with create-react-app.

Not sure whether you are using webpack 1 or two but in webpack 2 it resolves the node_modules folder with the resolve object in the module.exports object. Below I setup my root directory = helpers.root, but you can give it a relative path to your node_modules from where your webpack.config.js resides.
resolve: {
modules: [helpers.root(‘src’), helpers.root(‘node_modules’)],

Apologies for the late reply. @siliconmagi I should have the latest version of Webpack since I installed it with npm. I’ll give this a try, but it’s still strange how the exact same webpack config and directory structure worked with a previous app.
@ayoisaiah thanks for the suggestion! I did a brief read through of the documentation and it looks like a great tool to use. I’m surprised this is my first time hearing about it. It seems that there are limitless options out there for configuring an application.

Webpack 2 recently went live on npm and there are several breaking changes from Webpack 1 syntax including how one resolves node_modules:
// webpack 1
resolve: {
modulesDirectories: […],

// webpack 2
resolve: {
modules: […],

Ahhh now it all makes sense. Apparently it went live on the 1st, after I had already installed and setup the previous webpack file. Thanks for the info!