Vue-cli: Cannot read property 'webpackHotUpdate' of undefined

[diego81b]

Version

3.4.0

Environment info

  System:
    OS: Windows 7
    CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
  Binaries:
    Node: 8.12.0 - C:\nodejs\node.EXE
    Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 5.7.1 - C:\nodejs\npm.CMD
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.3.0
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.3.0
    @vue/cli-plugin-babel: ^3.0.1 => 3.3.0
    @vue/cli-plugin-e2e-nightwatch: ^3.0.1 => 3.3.0
    @vue/cli-plugin-eslint: ^3.0.1 => 3.3.0
    @vue/cli-plugin-pwa: ^3.2.0 => 3.3.0
    @vue/cli-plugin-unit-mocha: ^3.0.1 => 3.3.0
    @vue/cli-service: ^3.0.1 => 3.3.1
    @vue/cli-shared-utils:  3.3.0
    @vue/component-compiler-utils:  2.5.1
    @vue/eslint-config-airbnb: ^3.0.1 => 3.0.5
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.28
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    eslint-plugin-vue:  4.7.1
    vue: ^2.5.17 => 2.5.22
    vue-chat-scroll: ^1.3.3 => 1.3.5
    vue-eslint-parser:  2.0.3
    vue-gesture: ^2.0.0 => 2.0.0
    vue-hot-reload-api:  2.3.1
    vue-i18n: ^8.3.0 => 8.7.0
    vue-loader:  15.6.1
    vue-moment: ^4.0.0 => 4.0.0
    vue-multi-select: ^3.11.1 => 3.11.1
    vue-multiselect: ^2.1.3 => 2.1.3
    vue-qrcode-reader: ^1.3.0 => 1.3.4
    vue-router: ^3.0.1 => 3.0.2
    vue-router-prefetch: ^1.2.0 => 1.2.0
    vue-slider-component: ^2.7.8 => 2.8.6
    vue-spinner: ^1.0.3 => 1.0.3
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.17 => 2.5.22
    vue-template-es2015-compiler:  1.8.2
    vue-toasted: ^1.1.26 => 1.1.26
    vue2-touch-events: ^1.0.0 => 1.1.2
    vuejs-datepicker: ^1.5.4 => 1.5.4
    vuex: ^3.0.1 => 3.1.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

using --modern on build i got this error.

What is expected?

using --modern i can run the module version of the project

What is actually happening?

error because is using [this] and got undefined. the error seems that is a problem on HMR webapack plugin but with default configuration on vue-cli, in production should be disabled

---

[LinusBorg]

Hi

Thanks for filing this issue! Could you please provide a reproduction as is required by our issue rules, so we can debug this without trying to replicate this ourselves?

That would be very helpful, thanks!

[diego81b]

Because it's a production project I don't own the source code but I could try to isolate the minimal code to reproduce.
In the meanwhile if you retain usefull I try to deploy on a staging env but I don't know if could help the minified version
Best regards

[diego81b]

Hi @LinusBorg
i don't know which of those steps fix the error:

1. Update packages to the last version (taken from this repo)
2. Update node.js to version 10.15.1
3. Clean npm cache and Yarn cache
4. remove from babel.config.js @babel/plugin-syntax-dynamic-import'] (i'm pretty sure that this is the responsible)

with this now works as expected
best regards

[andreasvirkus]

Had the same thing for a second. Reason being we had forgotten NODE_ENV= in our .env file so the bundle wasn't build in a production mode. 🤦‍♂️
Hope this helps out some dummies like me in the future.

[alexander-elgin]

The issue is caused by @vue/cli-service package. It is fixed in version 3.8.0