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

Most upvoted comments

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:

loaders: [
  {
    test: /\.vue$/,
    loader: 'vue-loader'
  }, ...

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:

const injector = require('!!vue?inject!@/components/MyComponent')

For the following:

const injector = require('!!vue-loader?inject!@/components/MyComponent')

The key is to replace vue with vue-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.lock by removing the file then reinstalling the packages fixes the issue. Thanks to this comment.

私はこのように記述することで回避しました

const router = new VueRouter({   // not export default new VueRouter
      routes: [
    { ....
    }
  ]
});

export default router