Vue-loader: Loading components with require() gives error in v13.0.2

Created on 3 Aug 2017  路  4Comments  路  Source: vuejs/vue-loader

Version

13.0.2

Reproduction link

https://jsfiddle.net/chrisvfritz/50wL7mdz/

Steps to reproduce

The line of const HomeView = require( './components/HomeView' ); isn't working in v13.0.2. Changing it back to v12.2.2 it works again.

But when I change the line in:
import HomeView from './components/HomeView'

then it also works in v13.0.2. So what is exactly the difference between de require() and import and why is it broken in the new version?

import Vue from 'vue';
import VueRouter from 'vue-router';

import App from './App';

Vue.use( VueRouter );

const HomeView = require( './components/HomeView' );

const routes = [{
    path: '/',
    component: HomeView,
    name: 'home'
}];

const router = new VueRouter({
    routes: routes
});

var app = new Vue({
    router: router,
    template: '<App/>',
    components: { App: App }
}).$mount('#application');

What is expected?

It is expected that the component will be loaded into the page and I will see the HomeView.vue template.

What is actually happening?

I get an error:

[Vue warn]: Failed to mount component: template or render function not defined.


The example in the JSFiddle is only how it works, but I'm working with webpack, so I couldn't reproduce an exact sample.

When I change the version in my package.json back to v12.2.2 then it works again!

Most helpful comment

Pelase read release note for vue-loader 13.0.0. It's clearly explained what you should change in your code if you use commonJS

https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

All 4 comments

Pelase read release note for vue-loader 13.0.0. It's clearly explained what you should change in your code if you use commonJS

https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

Ah, right! I couldn't find it, I'm sorry.

Thank you!

Is any doc/example for find out how to setup vue-loader with require() ? I just start use vue-loader. Reading all release notes for 13 previos versions is not right way to setup one of plugins for Vue.

I am getting error: ReferenceError: require is not defined.
How can I fix it?

Was this page helpful?
0 / 5 - 0 ratings