Vue-loader: Can't do multiple injects on the same file

[flippidippi]

When writing tests and I would like to change what is injected into a Vue file per test, but I get an error like Object is not a constructor (evaluating '__vue_exports__(injections)').

I'm doing something like

import SendInjector from '!!vue?inject!src/views/Send'

describe('Send', () => {
  let test = (store) => {
    let Send = SendInjector({ store })
  }
})

If I call test once then it works as expected, but it throws an error on the second call.

[LinusBorg]

Hello @flipxfx,

thank you for your filing this issue.

Please follow the guidelines on how to report an issue. In particular, provide an example on www.jsfiddle.net (or a similar service) that reproduces the problem. If nessessary, create a repository for us to clone with a minimal reproduction. repositories of actual projects will generally not be accepted .

Thank you.

[flippidippi]

Guidelines link you have there 404. I'll work on getting an example in a repo.

[LinusBorg]

Thanks for the headsup about the link, fixed.

[gianlucacandiotti]

Any updates on this ? I saw some post recommending to lock inject-loader version to 2.0.1 but it isn't working.

[LinusBorg]

Since no reproduction was provided, no. There is no update on this.

[gianlucacandiotti]

I created a Laravel template that kind of merges with the vue-cli webpack template and I get the error there. Is it ok if I provide that ? It would just require to install the packages and run the task. Or does it have to be a completely isolated example ?

[LinusBorg]

It should be at isolated as possible, so a project template sounds fine (since this problem seems to nessessarily involve a build setup to be reproduceable, anyway) - but a project that you work on, which has mountains of code and dependencies would rather cloud the issue, OTOH.

[gianlucacandiotti]

Ok i hope this works for you, otherwise just tell me so I can work on an isolated example. These would be the steps:

1. git clone -b refactor https://github.com/gianlucacandiotti/laravue.git
2. cd laravue and npm install
3. npm run unit

You can check Welcome.spec.js to check the tests. If you comment one of the two describes, tests will will work as expected. It only happens when trying to create another instance of the injected component.

Thanks in advance for the help !

[adam-hanna]

@LinusBorg Here's a bare-bones repo built with vue-cli that is failing.

https://github.com/adam-hanna/vue-loader-inject-test

[jvmccarthy]

Also seeing this. Looks like an issue with how __vue_exports__ gets reassigned. Without knowing more about the internals, it looks like another variable should be introduced inside of the modules.exports function since __vue_exports__ is scoped outside of that function.

Here's what I'm seeing in generated output, with comments added with my user tag,

// @jvmccarthy: __vue_exports__ declared outside of module.exports function
// corresponds to https://github.com/vuejs/vue-loader/blob/39978d8/lib/loader.js#L189
var __vue_exports__, __vue_options__
var __vue_styles__ = {}

/* styles */
require("!!vue-style-loader!css-loader!vue-loader/lib/style-rewriter?id=data-v-e302ae10!sass-loader!./my-component.scss")

/* script */
// @jvmccarthy: __vue_exports__ set to injector loader
// corresponds to https://github.com/vuejs/vue-loader/blob/39978d8/lib/loader.js#L235-L238
__vue_exports__ = require("!!inject-loader!babel-loader!./my-component.js")

/* template */
var __vue_template__ = require("!!vue-loader/lib/template-compiler?id=data-v-e302ae10!vue-loader/lib/template-loader?raw&engine=pug!./my-component.pug")

/* dependency injection */
module.exports = function (injections) {
// @jvmccarthy: injector invoked, returning component definition and reassigning __vue_exports__,
// which is scoped outside of this function. The next time this function is invoked
// (when attempting to execute this injector again), the call will fail since __vue_exports__
// is now the component definition object instead of the injector set above.
// Perhaps this is where a variable scoped to this function should be introduced,
// something like __vue_component__?
  __vue_exports__ = __vue_exports__(injections)
// @jvmccarthy: the original export code, probably used when dependency injection isn't used.
// Again, the reassignment of __vue_exports__ on this line could be problematic as well.
// corresponds to https://github.com/vuejs/vue-loader/blob/39978d8/lib/loader.js#L331-L335
__vue_options__ = __vue_exports__ = __vue_exports__ || {}

[guilhermewaess]

Hello guys, I have the same problem, any workaround for that?

[jvmccarthy]

@guilhermewaess I've structured my test code to only call the injector once, like this,

const myComponentInjector = require('!!vue?inject!components/my-component.vue');
describe('MyComponent', () => {
  const fakeApi = jasmine.createSpyObj('fakeApi', ['makeSomeCall']);
  const MyComponent = myComponentInjector({
    'src/api/my-api': fakeApi
  });
  let vm;

  beforeEach(function configureSpies() {
    fakeApi.makeSomeCall.and.returnValue();
  });

  beforeEach(function createVueInstance() {
    vm = new Vue(MyComponent).$mount();
  });
});

Once this defect is resolved, I plan to invoke the injector in a beforeEach function, which will greatly clean up my test setup code.

[guilhermewaess]

@jvmccarthy I'm doing something like that, thanks.

BTW, your example cleared a dark area on my test! Thanks²

[dankuck]

I was having this problem. The bug disappeared when I upgraded vue-loader.

[flippidippi]

I'm currently not working with vue anymore so you can close the issue if this isn't a problem with anyone else. Maybe @dankuck's solution does the trick?

[yyx990803]

Closing outdated issues - if your issue still persists in the latest version of vue-loader, please file new one using the issue helper, thank you!

---

Note 14.0+ no longer supports inject mode. If you are using Jest, you can use Jest's own mocking API. For other test runners, we are investigating a replacement strategy for mocking deps during tests.