17

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?

  • 1
    Is this `var api = require` thing in a css file? – tom Sep 08 '20 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 –  Sep 10 '20 at 14:18
  • Hey. @Nairu, any development about this issue? I'm having same problem – João Saro Apr 14 '21 at 15:09
  • 3
    It looks, there is a rule duplicated. You need to find a way to be only once. – João Saro Apr 15 '21 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.. – Trip Aug 13 '21 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). – phentnil Nov 01 '21 at 00:56
  • Yes, as @phentnil sais, we need more info. Please share at least your `index.js`, `style.css` and `package.json`. And every other file that gets imported from those files. – Jos Nov 24 '21 at 07:42

1 Answers1

2

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

BleddP
  • 181
  • 7