Vue-loader: Module build failed: TypeError: this._init is not a function

[ralbatross204]

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.

[delta77x]

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'
  }, ...

[DearVikki]

@delta77x Your answer saved my afternoon!! Thx!! :D

[davewood]

I just had the same issue. changing to vue-loader in webpack config helped.

[Alvyre]

@delta77x you saved my day ! thanks !

[rudidev08]

This was it - *-loader is no longer optional with webpack. Changing vue to vue-loader fixed this

[kazupon]

Close
I think that solution said by rudidev08.

[alexkcode]

@rudidev08 any idea why it was ever optional anyway?

[ghost]

I got this error in another way, so for anyone else who finds this and the above solution does not solve the error....

I got the error by accidentally importing vue twice which consequently instantiated vue twice.

So in my main app I had

import Vue from 'vue'

const app = new Vue({
    // stuff ...
})

and then in another file that instantiated my router

import VueRouter from 'vue' // <-- This was the typo. Should have been 'vue-router'

export default new VueRouter({
    // stuff ...
})

[Protossoario]

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.

[gabengcuiyeye]

@delta77x thanks!!!

[Corbusier]

@delta77x thanks a lot,save my day!!!

[KMPolakowski]

Hey, I have the same problem, but cannot find anything about loader: vue (or rule) in the webpack configs of laravel-mix. Please help
I actualy get this: "TypeError: this._router.init is not a function"

[CristinaGuan]

I have already changed loader:'vue' to loader: 'vue-loader' in webpack.config,but this problem can not be solved

[sharkykh]

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.

[masashi49]

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

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

export default router