Failed to mount component: template or render function not defined.

[vakora]

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:

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' }); `

[ankurk91]

You should NOT override mix configs for vue loader. Laravel mix already comes with vue loader pre configured. Remove these lines and try again.

mix.webpackConfig({
module: {
rules: [
{
    test: /.vue/,
    loaders: ['vue-loader']
}
]
}
});

[vakora]

@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.)

"C:\Program Files\JetBrains\PhpStorm 2017.2.3\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run watch --scripts-prepend-node-path=auto

> @ watch C:\Users\tmediaa\Dropbox\tmediaa
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 1/1 modules 0 active
Webpack is watching the files…

 10% building modules 1/2 modules 1 active ...ox\tmediaa\resources\assets\js\app.js
 10% building modules 1/3 modules 2 active ...mediaa\resources\assets\sass\app.scss
 10% building modules 2/3 modules 1 active ...ox\tmediaa\resources\assets\js\app.js
 10% building modules 2/4 modules 2 active ...mediaa\resources\assets\sass\app.scss
 10% building modules 2/5 modules 3 active ...modules\style-loader\lib\addStyles.js
 10% building modules 3/5 modules 2 active ...mediaa\resources\assets\sass\app.scss
 10% building modules 4/8 modules 4 active ...a\node_modules\vue\dist\vue.common.js
 10% building modules 5/8 modules 3 active ...a\node_modules\vue\dist\vue.common.js
 10% building modules 6/8 modules 2 active ...diaa\resources\assets\js\bootstrap.js
 10% building modules 6/10 modules 4 active ...es\assets\js\components\Customers.vue
 10% building modules 7/12 modules 5 active ...ode_modules\webpack\buildin\global.js
 10% building modules 8/12 modules 4 active ...ode_modules\webpack\buildin\global.js
 11% building modules 9/12 modules 3 active ...ode_modules\webpack\buildin\global.js
 11% building modules 12/13 modules 1 active ...mediaa\resources\assets\sass\app.scss
 11% building modules 12/15 modules 3 active ...es\assets\js\components\Customers.vue
 11% building modules 13/18 modules 5 active ...x\tmediaa\node_modules\axios\index.js
 11% building modules 15/19 modules 4 active ...aa\node_modules\jquery\dist\jquery.js
 11% building modules 16/22 modules 6 active ...ces\assets\js\components\Customer.Vue
 12% building modules 18/22 modules 4 active ...ces\assets\js\components\Customer.Vue
 12% building modules 19/22 modules 3 active ...tmediaa\node_modules\lodash\lodash.js
 12% building modules 20/22 modules 2 active ...tmediaa\node_modules\lodash\lodash.js
 12% building modules 21/22 modules 1 active ...mediaa\resources\assets\sass\app.scss
 12% building modules 21/25 modules 4 active ...ediaa\node_modules\process\browser.js
 12% building modules 23/25 modules 2 active ...ediaa\node_modules\process\browser.js
 12% building modules 24/25 modules 1 active ...mediaa\resources\assets\sass\app.scss
 12% building modules 24/26 modules 2 active ...ediaa\node_modules\axios\lib\utils.js
 12% building modules 24/27 modules 3 active ...aa\node_modules\axios\lib\defaults.js
 12% building modules 24/31 modules 7 active ..._modules\axios\lib\cancel\isCancel.js
 12% building modules 24/32 modules 8 active ...de_modules\axios\lib\cancel\Cancel.js
 12% building modules 24/33 modules 9 active ...dules\axios\lib\cancel\CancelToken.js
 13% building modules 26/33 modules 7 active ...dules\axios\lib\cancel\CancelToken.js
 13% building modules 28/33 modules 5 active ...dules\axios\lib\cancel\CancelToken.js
 13% building modules 29/33 modules 4 active ...dules\axios\lib\cancel\CancelToken.js
 13% building modules 32/33 modules 1 active ...mediaa\resources\assets\sass\app.scss
 13% building modules 32/37 modules 5 active ...ode_modules\axios\lib\adapters\xhr.js
 14% building modules 34/37 modules 3 active ...ode_modules\axios\lib\adapters\xhr.js
 14% building modules 36/37 modules 1 active ...mediaa\resources\assets\sass\app.scss
 14% building modules 36/38 modules 2 active ...ediaa\node_modules\is-buffer\index.js
 14% building modules 37/48 modules 11 active ..._modules\axios\lib\helpers\cookies.js
 15% building modules 44/48 modules 4 active ..._modules\axios\lib\helpers\cookies.js
 15% building modules 47/48 modules 1 active ...mediaa\resources\assets\sass\app.scss
 15% building modules 48/49 modules 1 active ...mediaa\resources\assets\sass\app.scss
 15% building modules 49/49 modules 0 active
 16% building modules 50/50 modules 0 active
 16% building modules 50/51 modules 1 active ...trap\glyphicons-halflings-regular.eot
 16% building modules 50/55 modules 5 active ...trap\glyphicons-halflings-regular.ttf
 71% sealing
 16% building modules 55/56 modules 1 active ...mediaa\resources\assets\sass\app.scss
 16% building modules 56/56 modules 0 active
 82% module reviving
 87% chunk id optimization
 88% hashing
 90% chunk assets processing
 94% asset optimization
 95% emitting ERROR  Failed to compile with 1 errors13:50:32

 error  in ./resources/assets/js/components/Customer.Vue

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <div>
|         <p>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!</p>

 @ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Customers.vue 29:0-38
 @ ./resources/assets/js/components/Customers.vue
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

                                                                                                    Asset     Size  Chunks                    Chunk Names
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1  20.1 kB          [emitted]         
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb    18 kB          [emitted]         
 fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158  23.4 kB          [emitted]         
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512  45.4 kB          [emitted]         
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760   109 kB          [emitted]         
                                                                                               \js\app.js  1.27 MB       0  [emitted]  [big]  \js\app
                                                                                             \css\app.css   147 kB       0  [emitted]         \js\app

ERROR in ./resources/assets/js/components/Customer.Vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <div>
|         <p>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!</p>
 @ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Customers.vue 29:0-38
 @ ./resources/assets/js/components/Customers.vue
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

[ruchernchong]

Can you upload this to your git repo, I try to reproduce your project errors on my computer.

[vakora]

@ruchern own project in this repo :

https://github.com/tmediaa/laravelvue-problem

[ankurk91]

@tmediaa Rename your Customer.Vue to Customer.vue, notice the extension should be lowercase .vue

[vakora]

@ankurk91 thanks body

[the-webguys]

Is there a way to allow laravel-mix to build with templates will be precompiled into render functions which work perfectly in CSP environments?

[ankurk91]

npm run prod

Will generate render function

[the-webguys]

Thanks @ankurk91 but that doesn't work, the vue file has a new Function() in there and that is not supported for CSP - speaking with them (Vue) on their discord they advised this course of action: https://vuejs.org/v2/guide/installation.html#CSP-environments but it is not so simple to install with laravel-mix - or at least i am having a very hard (error-filled) time with it. Even just updating vue-loader to the latest version, requires a number of extra packages which all present errors. I have since restored everything but am no closer to a solution

[ankurk91]

Laravel mix is using full build see https://github.com/JeffreyWay/laravel-mix/blob/52582c120f2eaef0146d63a43c41235f40e3f030/src/builder/WebpackConfig.js#L109-L115

You can force mix to load vue runtime build in production. Just replace the file name to vue.runtime.common.js Read more about overwriting webpack config.

https://github.com/JeffreyWay/laravel-mix/blob/master/docs/quick-webpack-configuration.md Note: you should only load runtime build in production.

Mix.inProduction()

Laravel mix is using older version of vue-loader, don't try to upgrade it.

Read more about Vue builds - https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

[the-webguys]

thanks for that, I have tested making the following changes:

`this.webpackConfig.resolve = { extensions: ['*', '.js', '.jsx', '.vue'],

        alias: {
            //vue$: 'vue/dist/vue.common.js'
            vue$: 'vue/dist/vue.runtime.common.js'
        }
    };`

This does get rid of the error (which is awesome) but... And this is a BIG but (insert joke here). The site will not load, just a loading icon in the tab and no content is displayed, no console errors - checked with both FireFox and Chrome (checked both as on some occasions one may show errors the other doesn't - also weird!)

[ankurk91]

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

npm run prod

Make sure your are not using any inline vue template.

You should read this https://github.com/JeffreyWay/laravel-mix/issues/1052 Make sure have nothing inside your app div

<div id="app"></div>
``|

[the-webguys]

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...

[the-webguys]

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 laravel-mix to split up the code into chunks or separate files?

[ankurk91]

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 mix.js() method multiple times to generate two app js.

[the-webguys]

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-webguys]

The thumbed answer worked, i had html code inside the <div id="app">

[MatthewAugier]

Can I just add :) I've upgraded from mix 2 to ix 4 and started getting this same issue :) I had code that was "import as mixin from 'abc'" then "mixins: [mixin]" and also components like that as well, all working fine in mix 2... breaks in 4 with this template or render function not defined. Simply removing the as fixed my issues - so I hope this helps someone else

[diadal]

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>

[diadal]

finally issue fixed only do this in my webpack.mix.js

let mix = require('laravel-mix');

mix.webpackConfig({
        resolve: {
            extensions: ['*', '.wasm', '.mjs', '.js', '.jsx', '.json', '.vue'],
            alias: {
                'vue$': 'vue/dist/vue.runtime.common.js'
            }
        },
    });

[scheMeZa]

Also upgraded to mix 4, and having the same problem.

[diadal]

simple solution make sure nothing is inside <div id="app"></div> then do this

cd node_modules/vue-loader

npm install

then

npm run dev or hot or prod 

[scheMeZa]

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);