🚨 TypeError: Class extends value undefined is not a constructor or null

[dwiyatci]

Description

Not really sure what's going on, but the aforementioned error was thrown on my machine when including the plugin, i.e. const MiniCssExtractPlugin = require('mini-css-extract-plugin');.

Error Message & Stack Trace

TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (/Users/glenn/github/minimalistic-devserver/node_modules/mini-css-extract-plugin/dist/index.js:30:47)
    at Module._compile (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)
    at Module.require (module.js:606:17)
    at require (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/glenn/github/minimalistic-devserver/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
    at Module._compile (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)
    at Module.require (module.js:606:17)
    at require (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/glenn/github/minimalistic-devserver/webpack.config.js:8:30)
    at Module._compile (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)
    at Module.require (module.js:606:17)
    at require (/Users/glenn/github/minimalistic-devserver/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (/Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/convert-argv.js:133:13)
    at requireConfig (/Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/convert-argv.js:135:6)
    at /Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/convert-argv.js:142:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/convert-argv.js:140:15)
    at yargs.parse (/Users/glenn/github/minimalistic-devserver/node_modules/webpack-cli/bin/webpack.js:234:39)

Config

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = env => ({});

Environment

Node.js v8.9.0
darwin 15.6.0
npm v5.5.1
webpack 4.0.1
mini-css-extract-plugin 0.1.0

[insin]

mini-css-extract-plugin requires webpack >= 4.1.0

[dwiyatci]

OMG, didn't notice webpack 4.1.0 published already - that was super quick! Thanks for pointing this out, I feel so stupid now 😅

[eloytoro]

@dwiyatci #4

[ashimasingla20]

I am still getting this even after webpack version 4.1.0

[lirdicani]

any update on this? I also get the error.
Below is my dependencies of my react project:

"dependencies": {
    "@ant-design/icons-react": "^2.0.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.0.0",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "classnames": "^2.2.6",
    "env-cmd": "^10.1.0",
    "eslint-config-react-app": "^5.2.0",
    "history": "^4.10.1",
    "i18next": "^19.4.5",
    "moment": "^2.26.0",
    "qrcode.react": "^1.0.0",
    "qs": "^6.9.4",
    "react": "^16.12.0",
    "react-copy-to-clipboard": "^5.0.2",
    "react-countries-input": "0.0.2",
    "react-datepicker": "^2.16.0",
    "react-dom": "^16.12.0",
    "react-ga": "^2.7.0",
    "react-geosuggest": "^2.12.1",
    "react-i18next": "^11.5.0",
    "react-loader-spinner": "^3.1.5",
    "react-notifications-component": "^2.4.0",
    "react-paginate": "^6.3.2",
    "react-phone-input-2": "^2.12.0",
    "react-player": "^2.0.1",
    "react-router-dom": "^5.1.2",
    "react-router-hash-link": "^1.2.2",
    "react-scripts": "3.4.0",
    "react-sticky": "^6.0.3",
    "react-tiny-link": "^3.4.0",
    "react-tiny-popover": "^5.0.1",
    "react-xml-parser": "^1.1.6",
    "reactstrap": "^8.4.1",
    "tsutils": "^3.17.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "video-react": "^0.14.1",
    "xml-js": "^1.6.11"
  },
  "scripts": {
    "start": "PORT=3000  react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "dotenv": "^8.2.0",
    "eslint": "^7.1.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-react": "^7.20.0"
  }

[dwiyatci]

So how to fix it?

#3 (comment)