webpack a bug with style loader

Question

I just want to import a css file(import './index.css'), but style loader throw an err:

injectStylesIntoStyleTag.js:74 Uncaught RangeError: Invalid array length at addModulesToDom (injectStylesIntoStyleTag.js:74) at ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js.module.exports (injectStylesIntoStyleTag.js:227) at Object../app/components/editor/index.css (index.css?033a:16) at webpack_require (bootstrap:726) at fn (bootstrap:100) at Module../app/components/editor/index.jsx (index.jsx:1) at webpack_require (bootstrap:726) at fn (bootstrap:100) at Module../app/main.js (main.js:1) at webpack_require (bootstrap:726)

I don't know how to deal with it, and my package.json:

{
  "name": "webpack-learn",
  "version": "1.0.0",
  "description": "webpack config lear",
  "main": "app/index.js",
  "scripts": {
    "test": "I don't know what this property means.",
    "build": "webpack --config build/webpack.prod.js",
    "dev": "webpack-dev-server --config build/webpack.dev.js"
  },
  "keywords": [
    "react",
    "typescript",
    "frontend",
    "blog",
    "project",
    "component"
  ],
  "author": "xuwentao93",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "@babel/preset-react": "^7.7.4",
    "@typescript-eslint/eslint-plugin": "^2.13.0",
    "@typescript-eslint/parser": "^2.13.0",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^3.4.0",
    "cssnano": "^4.1.10",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.17.0",
    "file-loader": "^5.0.2",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "hard-source-webpack-plugin": "^0.13.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "speed-measure-webpack-plugin": "^1.3.1",
    "style-loader": "^1.1.1",
    "thread-loader": "^2.1.3",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.4",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.4"
  }
}

is there anyone can help me?

I'm having the same issue except im importing a scss file and have no imports of css files in my code, have you found anything that's causing this issue? — user2617566

piedaochuan piedaochuan · Accepted Answer · 2020-01-20T01:36:21

I know why the problem cause in my project. When I was learning webpack, I use image-webpack-loader to minify images, but it didn't work. So I removed it in my package.json and run 'yarn', then this error occurred.I used git to return my last vision, then deleted my node_modules and ran 'yarn' again, the problem is solved. But I'm still confusing why style-loader will have this error...

webpack a bug with style loader

1 Answers