Failed to mount component: template or render function not defined. #1394
Comments
|
You should NOT override mix configs for vue loader. mix.webpackConfig({
module: {
rules: [
{
test: /.vue/,
loaders: ['vue-loader']
}
]
}
}); |
|
@ankurk91 when i clear this section of code in mix file i got new error like this: Error: (You may need an appropriate loader to handle this file type.) |
|
Can you upload this to your git repo, I try to reproduce your project errors on my computer. |
|
@ruchern own project in this repo : |
|
@tmediaa |
|
@ankurk91 thanks body |
|
Is there a way to allow laravel-mix to build with templates will be precompiled into render functions which work perfectly in CSP environments? |
Will generate render function |
|
Thanks @ankurk91 but that doesn't work, the vue file has a |
|
Laravel mix is using full build see You can force mix to load vue runtime build in production. https://github.com/JeffreyWay/laravel-mix/blob/master/docs/quick-webpack-configuration.md Laravel mix is using older version of vue-loader, don't try to upgrade it. Read more about Vue builds - |
|
thanks for that, I have tested making the following changes: `this.webpackConfig.resolve = { This does get rid of the error (which is awesome) but... And this is a BIG but (insert joke here). |
|
Believe you are doing this - // To the bottom of your project webpack.mix.js file
if(Mix.inProduction()) {
mix.webpackConfig({
resolve :{
alias: {
vue$: 'vue/dist/vue.runtime.common.js'
}
)}Then Make sure your are not using any inline vue template. You should read this <div id="app"></div>
``| |
|
ahhh, that is exactly what I am doing. The site is not all vue, just the home page. Is there any way around this? - other than re-coding the entire website... |
|
perhaps, a way of creating 2 different app.js files, one for the Vue page and another, minus all the vue code for the rest of the site? is it possible to use |
|
Having two different app.js files on same page will satisfy the CSP? You can not past CSP errers easily. There might be another library which is voilating the CSP rules. You can call |
|
No, i meant to have 2 different app.js, files one for the page that actually uses vue. A different one for the rest of the site, or even easier... if i can just separate the other includes, like jquery, into a different file, i won't have to re-code the entire site |
|
The thumbed answer worked, i had html code inside the |
|
Can I just add :) I've upgraded from mix 2 to ix 4 and started getting this same issue :) |
|
I upgrade from mix 3 to 4 I faced the same issue 2 days now no solution <template>
<div>
Hello Word
</div>
</template>
<script>
export default {
data(){
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
</style>
// window.Vue = require('vue');
import Vue from 'vue'
import Zp from './../components/out/test.vue'
// const Zp = require('./../components/out/test.vue');
Vue.config.productionTip = false;
new Vue({
el: '#appzp',
// components: { Zp },
// router,
render: h => h(Zp)
});
// const app = new Vue({
// // components: { Zp },
// render: h => h(Zp),
// // router
// }).$mount('#app')<body class=" ">
<div class="wrapper " id="appzp"></div>
<script src="{{ asset('js/test.js') }}" rel="preload"></script>
</body> |
|
finally issue fixed only do this in my |
|
Also upgraded to mix 4, and having the same problem. |
|
simple solution make sure nothing is inside then |
|
I fixed my problem, I use and register all of my vue components: From: const files = require.context('./components', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)));To: const files = require.context('./components', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));This translates to: Vue.component('example-component', require('./components/ExampleComponent.vue').default); |
… "failed to mount component" error. laravel-mix/laravel-mix#1394
This fixes the "failed to mount component" error. laravel-mix/laravel-mix#1394
Add ".default" after vue component require statements. This fixes the "failed to mount component" error. laravel-mix/laravel-mix#1394
laravel mix ver: 1.7.2
node -v : v7.9.0
npm -v: 5.5.1
when npm run watch is called get this problem: Failed to mount component: template or render function not defined.
i want to import child vue to parent vue component get this problem
laravel-mix file content:
`let mix = require('laravel-mix');
mix.webpackConfig({
module: {
rules: [
{
test: /.vue/,
loaders: ['vue-loader']
}
]
}
});
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
`
Customers.vue file:
`
package.json file:{"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.17",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"node-sass": "^4.7.2",
"vue": "^2.5.7",
"vue-resource": "^1.3.5"
}
}
Customer.vue file content:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa debitis eius exercitationem iste possimus quis similique veniam vero. Aliquam autem ea eos ipsa itaque iusto labore libero magni quaerat quod!
<script> export default { props:["product"] } </script>
app.js file:require('./bootstrap');import VueResource from 'vue-resource';
window.Vue = require('vue');
Vue.use(VueResource);
Vue.component('app', require('./components/Customers.vue'));
const app = new Vue({
el: '#app'
});
`
The text was updated successfully, but these errors were encountered: