I am using Django and Webpack and Vue2. And wrote app.vue file as the SFC in Vue. I import other js file (original library) in app.vue, But I got a error message from Chrome's console :
Uncaught TypeError: Cannot set property 'render' of undefined
.vue file can importing other js files? In that case, how to import other js files?
index.html
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<div id="app">
<App></App>
</div>
{% render_bundle 'main' %}
</body>
</html>
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';
import routes from './routes';
Vue.config.devtools = true;
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: routes,
})
new Vue({
el: '#app',
components: {
'App': App,
},
router: router,
});
app.vue
<template>
</template>
<script>
import Hello from './lib/hello.js';
</script>
lib/hello.js
export default class Hello {
world() {
console.log('Hello, World!');
}
}