vue-loader: Module build failed: TypeError: this._init is not a function
I’m trying to build an electron app that will be using vue.js as well as electron-builder for final distribution. The electron-builder docs suggest using a two-package.json setup where the devDependencies are in the main package.json, and the dependencies are in app/package.json.
However, when I try to incorporate vue.js into this app, I run into problems because of this two-package.json setup. I get the following output when trying to run webpack:
[Vue warn]: Vue is a constructor and should be called with the new keyword
Hash: a745e98e5605ad253bf8
Version: webpack 1.13.2
Time: 704ms
Asset Size Chunks Chunk Names
bundle.js 152 kB 0 [emitted] main
+ 3 hidden modules
ERROR in ./app/components/MainScreen.vue
Module build failed: TypeError: this._init is not a function
at Object.Vue$2 (/Users/rod/Innovative/projects/aglist/kiosk/varius-kiosk/app/node_modules/vue/dist/vue.common.js:2594:8)
@ ./app/index.js 7:18-56
My index.js looks like this:
import Vue from 'vue'
import MainScreen from './components/MainScreen.vue'
new Vue({
el: 'body',
components: { MainScreen }
})
And the directory structure of the relevant files in my project looks like this:
/package.json (defines devDependencies)
/webpack.config.json (uses app/index.js as the entry)
/app/package.json (defines dependencies)
/app/index.js
Commenting out the import MainScreen line results in webpack running successfully.
Another configuration where webpack works is if I move vue from a dependency in app/package.json to the main package.json, and also remove vue from the app/node_modules folder. This is not acceptable, though, because I need vue as a dependency in app/package.json in order to do make my app installers. If I have vue as a dependency in both package.json and app/package.json I still get the error above, even if I explicitly import Vue from '../node_modules/vue' in index.js. (IE, webpack seems to be using /app/node_modules/vue rather than /node_modules/vue)
Am I missing something here? Could anyone help me configure this so I can use both vue.js with webpack, and electron-builder with its two-package.json setup?
This issue is related to #171 which was closed due to inactivity.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 15 (1 by maintainers)
Commits related to this issue
- fix loader setting for webpack2 (#409) — committed to vuejs/vue-loader by kazupon 7 years ago
- fix loader setting for webpack2 (#409) — committed to Transnal/vue-loader by kazupon 7 years ago
- Fix [Vue warn]: Vue is a constructor and should be called with the keyword Found answer at: https://github.com/vuejs/vue-loader/issues/409#issuecomment-284069229 Thank you, @Protossoario, thank you,... — committed to kiltec/vuetable-2 by kiltec 7 years ago
- Fix [Vue warn]: Vue is a constructor and should be called with the keyword Found answer at: https://github.com/vuejs/vue-loader/issues/409#issuecomment-284069229 Thank you, @Protossoario, thank you,... — committed to binary4oul/vue2table-laravel5.4 by binary4oul 7 years ago
I had a similar situation - looks like webpack is using vue itself for loader instead of vue-loader in this case. I resolved this type of problem by changing loader:‘vue’ to loader: 'vue-loader’ in webpack.config:
For anyone coming here from Google, I was having the same issue when trying to inject dependencies into a Vue component, using the official webpack template for unit tests. I also solved it by changing this line:
For the following:
The key is to replace
vuewithvue-loader, as stated above by @delta77x.@delta77x Your answer saved my afternoon!! Thx!! 😄
This was it - *-loader is no longer optional with webpack. Changing vue to vue-loader fixed this
For anyone having this error, looks like regenerating
yarn.lockby removing the file then reinstalling the packages fixes the issue. Thanks to this comment.私はこのように記述することで回避しました