Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError

Question

I'm building a react app.

I imported a slider into a file, then I got a css-loader. I'm using webpack.

Here is my slider:

import React, {useState} from 'react';
import RubberSlider from '@shwilliam/react-rubber-slider';
import styles from '@shwilliam/react-rubber-slider/dist/styles.css';

export const Slider = () => {
  const [value, setValue] = useState(0.5)

  return <RubberSlider width={250} value={value} onChange={setValue} />
}

This ^ will go in another component and get called on.

All is well when I comment out

import styles from '@shwilliam/react-rubber-slider/dist/styles.css';

but I need these styles for the slider, when I run my Webpack command I get this error:

src/index.js (./node_modules/css-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./src/index.js)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) /Users/eddy/Projects/Sorting-Visualizer/src/index.js Unknown word

> 1 | import React from 'react';
    | ^
  2 | import ReactDOM from "react-dom";
  3 | import 

Here is my webpack.config.js file:

const path = require("path");
const config = {

    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    },

    resolve: { extensions: [".mjs", ".js", ".jsx", ".css"] },

    module: {
        rules: [
            {
                test: /\.js|jsx|.css$/,
                use: [  "style-loader", "css-loader", "babel-loader"],
                exclude: /node_modules/,
                // loader: "style-loader!css-loader"
            },

        ]
    },

}

module.exports = config;

What am I doing wrong?

Thank you!

Answer 1

The root cause for this error is when the css file is compiled by the css loader more than once. Check if your webpack config has duplicate css loaders entry. Remove [ "style-loader", "css-loader" ], from webpack.config.js and try npx webpack This might happen that css loader is executing indirectly in your app.