I am integrating react into Django, here is the error I get.

ERROR in ./backend/frontend/src/App.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .App {
|   text-align: center;
| }
 @ ./backend/frontend/src/App.js 2:0-19
 @ ./backend/frontend/src/index.js 4:0-24 6:107-110

Here is my webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: "babel-loader",
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
        ]

    }

};

and here is my package.json dependencies

  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack": "^5.55.0",
    "webpack-cli": "^4.8.0"
  }

Can someone please suggest how to fix this error on how to fix this? Thanks

Solution

Turns out I had to alot of things missing, here is what I did:

npm i react react-dom --save-dev
npm install -D style-loader css-loader sass-loader
npm install --save axios
npm install --save react-router-dom
npm install --save react-dropzone
npm install react-bootstrap@next bootstrap@5.1.1
npm i web-vitals --save-dev
npm install url-loader --save-dev
npm install file-loader --save-dev

And then updated my webpack.config.js according to the top answer.

CodePudding user response：

Unless your package.json already contains them under dependencies, install the missing loaders:

npm install -D style-loader css-loader sass-loader

Add a new rule to your webpack config to target css files:

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: "babel-loader",
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};