vue-loader: Regression: Injected components seemingly fail to mount in tests

Version

13.0.0

Reproduction link

https://github.com/riovir/injected-component-reprod

Steps to reproduce

Clone - install - test with the given repo, or:

npm i -g vue-cli
vue init webpack
- make sure to pick unit tests
npm i
npm i -D vue-loader@13.0.0
open test/specs/Hello.spec.js and add these two snippets

  it('should render correct contents even when injecting', () => {
    const HelloInjector = require('!!vue-loader?inject!@/components/Hello')
    const Constructor = Vue.extend(HelloInjector({}))
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })

run the test to see they pass
make a copy of Hello.vue (eg. Hello0.vue)
rerunning the tests should trigger the error:

ERROR LOG: '[Vue warn]: Failed to mount component: template or render function not defined. (found in <Root>)'

npm i -D vue-loader@12.2.1
rerunning “fixes the tests”

What is expected?

Mock-injected components to behave the same way as their regularly loaded counterparts. Particularly where the render function is concerned.

What is actually happening?

In arbitrary situations (project size seems to be a factor) inject-loaded Vue components fail to mount due to missing render function.

About this issue

Original URL
State: open
Created 7 years ago
Comments: 22 (7 by maintainers)

Commits related to this issue

refactor(vue-loader): fix issue with new version of package per https://github.com/vuejs/vue-loader/issues/873 added .default to imports to be compatible with versions greater than 13.7 — committed to jraller/Vote by jraller 6 years ago

Most upvoted comments

Can anyone report what the status of this issue is? I’m experiencing this problem as well.

scottbedard on Jan 30, 2018

I’ll check it out…

LinusBorg on Jul 5, 2017

Tried applying your suggested fix @LinusBorg to use Vue.extend(Injector({}).default). Doesn’t seem to have done anything unfortunately and the injected component seems to still have the notorious undefined render function.

I’m currently running these tests using these versions:

inject-loader@3.0.1
vue-loader@13.3.0
webpack@3.8.1

A horrible fix I’ve employed to get around this is to import the original component and replace the injected component’s render method with the original’s.

import OriginalComponent from '@/Component.vue';
import injector from '!!vue-loader?inject!@/Component.vue'; 
// require('!!vue-loader?inject!@/Component.vue') also does the same thing

const Component = injector({ ... });
Component.render = OriginalComponent.render;

This is pretty horrendous though and it would be good to not have to do this 😞

ntsim on Dec 1, 2017