19

I am trying to run a webpack-dev-server built, but it fails everytime with the following error:

ERROR in ./src/style.css (./node_modules/css-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./src/style.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) Unknown word

> 1 | var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!../node_modules/css-loader/dist/cjs.js!./style.css");
  3 |

My webpack.dev.js looks like this:

const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    entry: './src/index.js',
    mode: 'development',
    devtool: 'inline-source-map',
    optimization: {
        usedExports: true,
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ],
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader',
                ],
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
        ],
    },
});

The error appears on using this in my index.js:

import './style.css';

Many solutions suggest the order of the style-loader and the css-loader, but as far as I know it is in the correct order. What am I doing wrong?

Improve this question
7
  • 1
    Is this var api = require thing in a css file? Commented Sep 8, 2020 at 14:04
  • 1
    nope, it's not in my css. I checked everything and I thought that it was the use of var instead of let in the node_module, but I can't find the line Commented Sep 10, 2020 at 14:18
  • 3
    It looks, there is a rule duplicated. You need to find a way to be only once. Commented Apr 15, 2021 at 15:26
  • 1
    style-loader generates that rule dynamically, that's why you can't find it. then the unknown word part is because either some other loader or even style-loader is kluding on reading its own content. sometimes that's resolved by differing node or webpack versions, or the order of your loaders.. a lot of different reasons this could occur.. Commented Aug 13, 2021 at 11:17
  • 2
    Can you please share more details? Include your style.css, package.json, or other helpful files in your project. I tried to reproduce this error based on given details, but was unable to do so. If you're receiving a CssSyntaxError then I suspect that the line it is showing is in your style.css file (which looks like JavaScript and it shouldn't be there at all). Commented Nov 1, 2021 at 0:56

1 Answer 1

Reset to default
3

I had the same error when trying to use the style-loader and the MiniCssExtractPlugin simultaneously. Your example uses webpack merge, so I assume that you also have a webpack.common.js somewhere with additional CSS rules?

In my case, what solved it was as following:

I have the following rules in my webpack.dev.config.js:

module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader",
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
        ],
      },
    ],
  },

And the following in my webpack.prod.config.js:

module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
        ],
      },
    ],
  },

You could also use the ternary operator to check if mode === 'production' and leave it in one file but I prefer to have two separate files to keep it more readable in case the webpack configs get too big.

I also tried to move the css-loader, postcss-loader and sass-loader to the same webpack.common.js file but for some reason it didn't work.

Not sure if that might be cause of your error but it fixed it in my use case so now I use the style loader for my dev environment and the plugin to compile for production.

This worked for webpack 5 and node 16

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.