Dominik Kolesar
Dominik Kolesar

Reputation: 120

Can't resolve 'css-loader' - Webpack Getting Started Error

Following exactly the getting started guide on the webpack site I run into this error on build:

ERROR in ./src/index.js Module not found: Error: Can't resolve 'css-loader' in 'C:\Users\Dominik\Desktop\tutorial' @ ./src/index.js 2:0-21 webpack.config.js

The css-loader is installed locally. It is registered in the package.json. What Im I doing wrong?

    const path = require("path");

    module.exports = {
      entry: "./src/index.js",
      output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist")
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
          }
        ]
      }
    };

package.json

    {
      "name": "tutorial",
      "version": "1.0.0",
      "description": "",
      "private": true,
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "css-loader": "^3.4.0",
        "style-loader": "^1.1.1",
        "webpack": "^4.41.4",
        "webpack-cli": "^3.3.10"
      },
      "dependencies": {
        "lodash": "^4.17.15"
      }
    }

index.js

    import _ from "lodash";
    import "./style.css";

    function component() {
      const element = document.createElement("div");

      element.innerHTML = _.join(["Hello", "webpack"], " ");
      element.classList.add("hello");

      return element;
    }

    document.body.appendChild(component());

style.css

    .hello {
      color: red;
    }

Upvotes: 0

Views: 1902

Answers (1)

T. Short
T. Short

Reputation: 3614

Try re-running npm install --save-dev css-loader. Can you see it in your node_modules folder?

EDIT

Uninstalling and re-installing the module fixed it:

npm remove css-loader && npm install --save-dev css-loader

Upvotes: 2

Related Questions