When I using inject-loader, got error: Module build failed: TypeError: this._init is not a function

[akrom123]

I'm using vue-webpack-boilerplate
Hello.vue

<script>
import Hello0 from './Hello0';
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

in Hello.spec.js

const inject = require('!!vue?inject!src/components/Hello');
const Hello = inject({
        './Hello0': {}
      })

deps:

    "vue": "^2.1.10",
    "inject-loader": "^2.0.1",
    "vue-loader": "^10.3.0",

[akrom123]

I solved this when
replaced require('!!vue?inject!src/components/Hello') -> require('src/components/Hello?inject')
and in karma.conf added

webpackConfig.module.rules[<vueIdx_in_array>] = {
        test: /\.vue$/,
        oneOf: [
          {
            test: /\.vue$/,
            resourceQuery: '?inject',
            loader: 'vue-loader',
            options: { inject: true  }
          },
          {
            test: /\.vue$/,
            loader: 'vue-loader',
          }
        ]
      }

[paulvanbladel]

Very clever but I still get an error:
translated to your example: 'inject is not a function.
Anyhow, a more robust solution for mocking is required I believe. Is there currently a more stable solution available?

[paulvanbladel]

What is the value your provide for vueIdx_in_array ?
Thanks.

[arunshan]

@paulvanbladel I am facing the same issue with my vue, vuex and inject-module project. Really appreciate if you have a solution for injecting modules in vuejs.

package.json

"inject-loader": "^2.0.1",
"vue": "^2.2.4",
"vue-router": "^2.3.0",
"vue-server-renderer": "^2.2.4",
"vue-spinner": "^1.0.2",
"vue-template-compiler": "^2.2.4",
"vuex": "^2.2.1",
"vuex-router-sync": "^4.1.0",

webpack.base.config.js

const path = require('path')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const vueConfig = require('./vue-loader.config')
const HTMLPlugin = require('html-webpack-plugin')

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  devtool: isProd
    ? false
    : '#cheap-module-eval-source-map',
  entry: {
    app: './src/entry-client.js',
    vendor: [
      'axios',
      'vue',
      'vue-router',
      'vuex',
      'vuex-router-sync',
      'vee-validate',
      'moment',
      'lru-cache',
      'es6-promise/auto',
      'es6-object-assign/auto',
      'spark-md5',
      'payment',
      'numbro',
      'store'
    ]
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/dist/',
    filename: '[name].[chunkhash].js'
  },
  module: {
    noParse: [/es6-promise\.js$/, /es6-object-assign\.js$/], // avoid webpack shimming process
    rules: [
      {
        enforce: 'pre',
        test: /.vue$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  performance: {
    maxEntrypointSize: 300000,
    hints: isProd ? 'warning' : false
  },
  plugins: isProd ? [] : [
    new FriendlyErrorsPlugin()
  ]
}

karma.conf.js

var webpackConfig = require('../../build/webpack.test.config')

module.exports = function (config) {
  config.set({
    browsers: ['PhantomJS'],
    frameworks: ['mocha', 'sinon-chai', 'es6-shim'],
    reporters: ['spec', 'coverage'],
    files: [
      '../../node_modules/es6-shim/es6-shim.js',
      './index.js'
    ],
    preprocessors: {
      './index.js': ['webpack']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    colors: true,
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }
  })
}

NewApp.spec.js

import Vue from 'vue'
import Vuex from 'vuex'
import NewApp from '../../../src/views/NewApp.vue'
import store from '../../../src/store'
import router from '../../../src/router'

Vue.use(Vuex)

const mockedStore = {
  state: {
    app: {},
    orgs: {}
  }
}

describe('NewApp.vue', () => {
  it ('Check if NewApp is mounted', (done) => {
    const NewAppInject = require('inject-loader!../../../src/views/NewApp.vue')
    const NewAppMock = NewAppInject({})
    const vm = new Vue({
      template: '<div><test></test></div>',
      components: {
        'test': NewAppMock
      },
      store: new Vuex.Store(mockedStore)
    }).$mount()
    Vue.nextTick(() => {
      console.log('the element is', vm.$el)
      done()
    })
  })
})

Error:

 NewApp.vue
    ✗ Check if NewApp is mounted
	Object is not a constructor (evaluating 'NewAppInject({})')