Having trouble with webpack

Having trouble with webpack
0.0 0

#1

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
ct-dom\lib
 @ ./~/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
ct-router\lib
 @ ./~/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.


#2

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


#3

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.


#4

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.


#5

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’)],
},


#6

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.


#7

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: […],
}


#8

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!