Error: Cannot resolve module 'style-loader'

Question

I'm using style-loader with webpack and react framework. When I run webpack in terminal i'm getting Module not found: Error: Cannot resolve module 'style-loader' in import.js file although i've specified the file path correctly.

import '../css/style.css';
import React from 'react';
import ReactDOM from 'react-dom';
import jQuery from 'jquery';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';

webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: [
      // Set up an ES6-ish environment
      'babel-polyfill',

      // Add your application's scripts below
      APP_DIR + '/import.js'
    ],
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',

                exclude: /node_modules/,
                query: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015', 'stage-0', 'react']
                }
            },
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ],
        resolve: {
            extensions: ['', '.js', '.jsx', '.css']
        }
    }
};

David Guan · Accepted Answer · 2017-02-12T12:55:50.397

109

Try run script below:

npm install style-loader --save

Modify webpack config, add modulesDirectories field in resolve.

    resolve: {
        extensions: ['', '.js', '.jsx', '.css'],
        modulesDirectories: [
          'node_modules'
        ]        
    }

edited Feb 12 '17 at 12:55

answered Feb 03 '16 at 07:52

David Guan

4,180
1
25
32

2

Thanks that worked, I had previously installed `npm install style-loader css-loader --save-dev` but for some reason it didn't work. – Rahul Dagli Feb 03 '16 at 07:55
Could you upload your webpack config file? – David Guan Feb 03 '16 at 08:43
1

Answer updated, just need add `modulesDirectories ` in `resolve`. – David Guan Feb 03 '16 at 09:37
worked for me, however had to install uri-loader and file-loader modules too – rluks Nov 23 '16 at 18:02
This reply helps me when trying to run react with webpack – Faris Rayhan Jul 05 '18 at 09:55
This add to where? – Apr 30 '20 at 01:59

PKA · Answer 2 · 2016-07-25T16:21:52.163

Please run this script:

 npm install style-loader css-loader --save

Set your module as below:

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel-loader',
      include: path.join(_dirname, 'app')
    },
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }
  ],
  resolve: {
      extensions: ['', '.js', '.jsx', '.css']
  }
}

It's basically reading as for loaders - test jsx using babel-loader and the next test is a css file using style-loader and css-loader, which will recognize the modules. Also, you should exit out of npm start, and run "npm install" and run "npm start". Hopefully, this should take care of the issue.

score 22 · Answer 3 · edited Jun 15 '22 at 20:15

22

If you try to import a css file with this line:

import '../css/style.css';

and have added the style-loader in your webpack config.

The error states:

Module not found: Error: Cannot resolve module 'style-loader'

the module named "style-loader" is not resolved.

You need to install that module with:

$ npm install style-loader --save-dev

Or, if you're using yarn:

$ yarn add style-loader -D

Then run webpack again.

edited Jun 15 '22 at 20:15

Vadorequest

16,593
24
118
215

answered Mar 04 '17 at 00:47

sealocal

10,897
3
37
50

4

--save-dev please! – Chris Kolenko Feb 07 '20 at 16:29

score 14 · Answer 4 · edited Sep 08 '19 at 08:44

14

I wanted to add on to what David Guan said. In the newer versions of Webpack (V2+) moduleDirectories has been replaced with modules. The updated resolve portion of his answer would look like this:

resolve: {
    extensions: ['.js', '.jsx', '.css'], //An empty string is no longer required.
    modules: [
      'node_modules'
    ]        
}

For more information you can check out their official documentation. Hope this helps someone out there.

edited Sep 08 '19 at 08:44

Community

1
1

answered Aug 10 '17 at 21:10

StephenSolace

459
5
4

Official Documentation link is broken (404) – Phil Sep 30 '18 at 06:16

score 11 · Answer 5 · edited Mar 21 '18 at 09:16

11

Under Webpack 3, with node_module in a non-standard location, I had to use both resolve and resolveLoader configuration objects:

resolve: {
  modules: ["build-resource/js/node_modules"]
},
resolveLoader: {
  modules: ["build-resource/js/node_modules"]
},

edited Mar 21 '18 at 09:16

Billal Begueradj

20,717
43
112
130

answered Nov 05 '17 at 04:15

sinistral

115
2
4

Thanks! This fixed for me too. I'm embedding webpack into a CLI that is run from other folders, and so it couldn't find my loaders. Setting modules to `__dirname + 'node_modules'` worked! – ItalyPaleAle Mar 09 '19 at 01:47

score 2 · Answer 6 · answered Mar 16 '18 at 01:13

I use Windows and did everything but nothing worked. It appeared console didn't have enough permissions. So, after running in Admin mode I re-entered

npm install

and everything worked. You can see the result by appearing a lot of modules in node_modules directory.

Daniel · Answer 7 · 2017-11-19T20:44:47.617

1

If you're node_modules are on the same dir as your webpack config file you can simply add context: __dirname.

module.exports = {
    context: __dirname,
    entry: [
    ...

(works in both webpack 1 and 2)

edited Nov 19 '17 at 20:44

answered Jul 17 '17 at 08:16

Daniel

6,194
7
33
59

score 0 · Answer 8 · answered Aug 03 '22 at 19:54

remove 'style-loader!css-loader', make it ['style-loader','css-loader'] remove empty string '' from extensions array. It will be look like bellow

module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            
        ]
    },
    
    resolve: {
        extensions: ['.js', '.jsx', '.css'],   
    },

score 0 · Answer 9 · answered Jul 12 '23 at 00:16

0

You have to add to your dependencies

npm i style-loader css-loader

answered Jul 12 '23 at 00:16

Rusaln Lutfullin

1

score -2 · Answer 10 · answered Jun 03 '20 at 16:16

-2

it is very simple you have to install the fist syle-loader the css-loader.

answered Jun 03 '20 at 16:16

Vivek Gupta

5
1

3

It is better to include the essential steps to install the missing module. – Alizain Prasla Jun 03 '20 at 17:43

Error: Cannot resolve module 'style-loader'

10 Answers10

Linked

Related