Webpack css-loader cannot find index.js, style-loader cannot find addStyles.js

Question

ERROR in ./app/index.scss Module not found: Error: Cannot resolve 'file' or 'directory' ./../node_modules css-loader/index.js in C:\Users\johnliang\Temp\webpack-angular/app @ ./app/index.scss 4:14-116 13:2-17:4 14:20-122

ERROR in ./app/index.scss Module not found: Error: Cannot resolve 'file' or 'directory' ./../node_modules style-loader/addStyles.js in C:\Users\johnliang\Temp\webpack-angular/app @ ./app/index.scss 7:13-68

index.scss is not loaded in the final webpack output.

Can you provide your Webpack configuration? What do your imports look like? — Juho Vepsäläinen
– Juho Vepsäläinen, Commented May 16, 2015 at 4:55

Roman D · Accepted Answer · 2015-06-05 22:51:19Z

22

Be sure you use

path.join(__dirname, 'src')

and not

__dirname + '/src'

in your webpack.config.js:

var path = require('path');

module.exports = {
  context: path.join(__dirname, 'src'),
...

answered Jun 5, 2015 at 22:51

Roman D

3232 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sebastian Bender Over a year ago

I had exactly the same issue, and this worked. im guessing it has to do with using the correct path separator for the OS

mpen Over a year ago

Not just for the context but resolve.root needs to have the proper slashes too.

Pirozek Over a year ago

@roman-d You sir just saved me like a day of debugging, thanks a lot!

Rakesh Nallam Over a year ago

i have having the same issue. Could you please let me know how to update the below code. const path = require("path"); const dist = path.resolve(__dirname, "dist"); const combineLoaders = require('webpack-combine-loaders'); module.exports = { entry: [ './src/index.js' ], output: { path: __dirname+'/public', publicPath: '/', filename: 'bundle.js' },

Phil Gibbins · Accepted Answer · 2018-05-16 16:48:57Z

2

I had a similar issue to this whereby my webpack build was complaining about a .js file:

ERROR in ./node_modules/style-loader/lib/addStyles.js
Module not found: Error: Can't resolve './urls' in '/Users/<user>/path/to/project/node_modules/style-loader/lib'
 @ ./node_modules/style-loader/lib/addStyles.js 64:14-31

I must have copied this solution from a tutorial somewhere along the way (or many), but comparing to another project I have written, I realised that I had missed the extension '.js' to the resolve property in my webpack config:

resolve: {
  extensions: [
    '.scss',
    '.css',
    '.js' // <-- HERE
  ]
},

This fixed the issue for me, so definitely give this a go.

answered May 16, 2018 at 16:48

Phil Gibbins

5025 silver badges13 bronze badges

Collectives™ on Stack Overflow

Webpack css-loader cannot find index.js, style-loader cannot find addStyles.js

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related