TypeError on mini-css-extract-plugin/dist/CssDependency.js

[jdinartejesus]

Version

4.5.0

Environment info

System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: Not Found
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: Not Found
    Safari: 13.1.2
  npmPackages:
    @ant-design-vue/babel-helper-vue-transform-on:  1.0.1
    @samhammer/vue-cli-plugin-stylelint: ~2.0.0 => 2.0.0
    @storybook/vue: ^5.2.1 => 5.3.19
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.5.0
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.5.0
    @vue/cli-plugin-babel: ^4.5.0 => 4.5.0
    @vue/cli-plugin-eslint: ^4.5.0 => 4.5.0
    @vue/cli-plugin-router: ^4.5.0 => 4.5.0
    @vue/cli-plugin-vuex: ^4.5.0 => 4.5.0
    @vue/cli-service: ^4.5.0 => 4.5.0
    @vue/cli-shared-utils:  4.5.0 (3.12.1)
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx: ^3.7.0 => 3.7.0
    eslint-plugin-vue: ^6.2.2 => 6.2.2
    octicons-vue:  0.18.11
    pretty-checkbox-vue: ^1.1.9 => 1.1.9
    storybook-vue-router: ^1.0.7 => 1.0.7
    vue: ^2.6.11 => 2.6.11
    vue-avatar-editor-improved: ^1.0.5 => 1.0.5
    vue-awesome: ^4.0.2 => 4.1.0
    vue-carousel: ^0.18.0 => 0.18.0
    vue-cli-plugin-style-resources-loader: ~0.1.4 => 0.1.4
    vue-eslint-parser:  7.1.0
    vue-hot-reload-api:  2.3.4
    vue-i18n: ^8.15.3 => 8.19.0
    vue-loader:  15.9.3 (16.0.0-beta.4)
    vue-moment: ^4.1.0 => 4.1.0
    vue-multianalytics: 1.9.4 => 1.9.4
    vue-multiselect: ^2.1.0 => 2.1.6
    vue-paypal-checkout: ^3.2.0 => 3.2.0
    vue-router: ^3.2.0 => 3.3.4
    vue-select: ^2.5.1 => 2.6.4
    vue-slider-component: ^2.7.8 => 2.8.16
    vue-style-loader:  4.1.2
    vue-sweetalert2: ^1.5.3 => 1.6.4
    vue-teible: ^0.9.21 => 0.9.21
    vue-template-compiler: ^2.6.11 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
    vue2-datepicker: ^2.12.0 => 2.13.4
    vue2-medium-editor: ^1.1.5 => 1.1.6
    vuebars: ^0.1.5 => 0.1.6
    vuex: ^3.4.0 => 3.5.1
    vuex-map-fields: ^1.4.0 => 1.4.0
  npmGlobalPackages:
    @vue/cli: 4.5.0

Steps to reproduce

npx vue-cli-service build

What is expected?

Expected to build to production the project with npm run build.

What is actually happening?

✔  Building for production...
 ERROR  TypeError: Class extends value undefined is not a constructor or null
TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (/Users/jdinartejesus/develop/athlead/webapp/node_modules/mini-css-extract-plugin/dist/CssDependency.js:12:46)

---

Things I already tried:

• Step 1: Updated all dependencies and Vue-Cli to 4.5.0
• Step 2: Looking into this issue 5030. I tried { "resolutions": { "@vue/cli-service/[email protected]" } } but no luck.
• Step 3: Run build for development with npx vue-cli-service build --watch and this actually works.

PS: Running on serve npx vue-cli-service serve also works fine but not running to production.

[haoqunjiang]

We need a reproduction repo to further look into the problem.

For now, I guess it could be related to this issue: webpack-contrib/mini-css-extract-plugin#3
Please check your underlying webpack version by running npm list webpack

[jdinartejesus]

Thanks for the tip @sodatea of using npm list webpack, that was the missing piece!

NOTE: If someone has the same issue, update all the dependencies that have Webpack >= 4.1.0. Then I had to remove my /node_modules and reinstall everything. Voilà!

[yandixuan]

@sodatea i met the same question when i use npm -i
so i run npm list webpack
here is my screenshot

i guess vue-easytable caused it ?

[haoqunjiang]

@yandixuan yes, see Happy-Coding-Clans/vue-easytable#335

[yandixuan]

Thanks for your help 😀 @sodatea,have a nice day~