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

Question

im building a react app and i imported a slider in a file

and then i got a css-loader, im also 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

but 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 err -

ERROR in ./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 App from "./App.js";

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!

Solution

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.