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!

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.

Answer 2

也许您在 index.html 和 src/index.js 中同时导入了样式表......否则 webpack 将同时编译它们......

Answer 3

If you see something like this in your index.css folder delete it.


images.jsx;
import email from '../assets/email.png';
import mobile from '../assets/mobile.png';
import api from '../assets/api.png';
import cpp from '../assets/cpp.png';
import css from '../assets/css.png';
import figma from '../assets/figma.png';
import flutter from '../assets/flutter.png';
import git from '../assets/git.png';
import graphql from '../assets/graphql.png';
import html from '../assets/html.png';
import javascript from '../assets/javascript.png';
import mu5 from '../assets/mu5.png';
import node from '../assets/node.png';
import python from '../assets/python.png';
import react from '../assets/react.png';
import redux from '../assets/redux.png';
import sass from '../assets/sass.png';
import typescript from '../assets/typescript.png';
import vue from '../assets/vue.png';

import about01 from '../assets/about01.png';
import about02 from '../assets/about02.png';
import about03 from '../assets/about03.png';
import about04 from '../assets/about04.png';

import profile from '../assets/profile.png';
import circle from '../assets/circle.svg';
import logo from '../assets/logo.png';

import adidas from '../assets/adidas.png';
import amazon from '../assets/amazon.png';
import asus from '../assets/asus.png';
import bolt from '../assets/bolt.png';
import nb from '../assets/nb.png';
import skype from '../assets/skype.png';
import spotify from '../assets/spotify.png';

export default {
    email,
    mobile,
    api,
    cpp,
    css,
    figma,
    flutter,
    git,
    graphql,
    html,
    javascript,
    mu5,
    node,
    python,
    react,
    redux,
    sass,
    typescript,
    vue,
    about01,
    about02,
    about03,
    about04,
    profile,
    circle,
    logo,
    adidas,
    amazon,
    asus,
    bolt,
    nb,
    skype,
    spotify,
};

    index.css
    @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

this worked for me.

Answer 4

I had the same problem and I ran "npx webpack" in npm and css worked.