node.js - How to solve: Invalid configuration object. Webpack has been initialized using a configuration object that does not ma

admin管理员组

文章数量:1207749

I have a working project React + typescript that works with Babel and Webpack. When I did a code along, it has this error:

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

I got this error when I was trying to integrate a .css file. What I did was installed the style and css loader and put it in my webpack.config.js file.

I don't know what I am doing wrong. How do I get my styling to work?

webpack.config.js:

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  entry: path.resolve(__dirname, "..", "./src/index.tsx"),
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: ["babel-loader", "ts-loader"]
          }
        ]
      },
      {
        test: /\.(css|scss)$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, "..", "./dist"),
    filename: "bundle.js"
  },
  mode: "development",

  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "..", "./src/index.html")
    })
  ]
}

My devDependencies also says the css-loader and style-loader is installed.

package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template-typescript": "1.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@babel/preset-env": "^7.26.0",
    "@babel/preset-react": "^7.26.3",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.26",
    "babel-loader": "^9.2.1",
    "css-loader": "^7.1.2",
    "style-loader": "^4.0.0",
    "typescript": "^4.0.0",
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1"
  },
  "scripts": {
    "start": "webpack serve --config webpack/webpack.config.js --open",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

And this is where I import the file

App.tsx file:

import "./styles.css"

export const App: React.FC = () => {
  return (
    <div>
      <h1>React typescript webpack starter </h1>
      <h3> Hier word uiteindelijk de cursus pagina gemaakt!</h3>
    </div>
  )
}

本文标签：