Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
vahidarjmand opened this issue Jan 6, 2018 · 23 comments
Closed

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

vahidarjmand opened this issue Jan 6, 2018 · 23 comments

Comments

@vahidarjmand
Copy link

@vahidarjmand vahidarjmand commented Jan 6, 2018

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:
`





Example Component

                <div class="panel-body">
                    <table class="table table-borderd table-striped table-condensed">
                        <thead>
                        <tr>
                            <th>Name:</th>
                            <th>E-mail:</th>
                        </tr>
                        </thead>
                        <tbody>
                            <!--<customer v-for="customer in customerAll" :product="customer"></customer>-->
                            <customer :product="customers"></customer>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script> import Customer from './Customer.Vue'; export default { data() { return { customerAll: [] } }, components:{ "customer":Customer, } , methods:{ fetchUser(){ this.$http.get("customer").then(response => {this.customerAll = response.data.customers}) } }, created(){ this.fetchUser() }, mounted() { console.log('Component mounted.') } } </script>

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

@ankurk91
Copy link
Contributor

@ankurk91 ankurk91 commented Jan 7, 2018

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']
}
]
}
});
@vahidarjmand
Copy link
Author

@vahidarjmand vahidarjmand commented Jan 7, 2018

@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

@ruchern-chong
Copy link
Contributor

@ruchern-chong ruchern-chong commented Jan 7, 2018

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

@vahidarjmand
Copy link
Author

@vahidarjmand vahidarjmand commented Jan 8, 2018

@ruchern own project in this repo :

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

@ankurk91
Copy link
Contributor

@ankurk91 ankurk91 commented Jan 8, 2018

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

@vahidarjmand
Copy link
Author

@vahidarjmand vahidarjmand commented Jan 8, 2018

@ankurk91 thanks body

@JeffreyWay JeffreyWay closed this Jan 16, 2018
@the-webguys
Copy link

@the-webguys the-webguys commented Aug 23, 2018

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
Copy link
Contributor

@ankurk91 ankurk91 commented Aug 23, 2018

npm run prod

Will generate render function

@the-webguys
Copy link

@the-webguys the-webguys commented Aug 23, 2018

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
Copy link
Contributor

@ankurk91 ankurk91 commented Aug 23, 2018

Laravel mix is using full build see

this.webpackConfig.resolve = {
extensions: ['*', '.js', '.jsx', '.vue'],
alias: {
vue$: 'vue/dist/vue.common.js'
}
};

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
Copy link

@the-webguys the-webguys commented Aug 23, 2018

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
Copy link
Contributor

@ankurk91 ankurk91 commented Aug 23, 2018

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
#1052
Make sure have nothing inside your app div

<div id="app"></div>
``|
@the-webguys
Copy link

@the-webguys the-webguys commented Aug 23, 2018

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
Copy link

@the-webguys the-webguys commented Aug 23, 2018

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
Copy link
Contributor

@ankurk91 ankurk91 commented Aug 24, 2018

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
Copy link

@the-webguys the-webguys commented Aug 24, 2018

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
Copy link

@the-webguys the-webguys commented Aug 27, 2018

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

@MatthewAugier
Copy link

@MatthewAugier MatthewAugier commented Jan 10, 2019

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
Copy link

@diadal diadal commented Jan 12, 2019

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
Copy link

@diadal diadal commented Jan 12, 2019

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
Copy link

@scheMeZa scheMeZa commented Jan 16, 2019

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

@diadal
Copy link

@diadal diadal commented Jan 16, 2019

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
Copy link

@scheMeZa scheMeZa commented Jan 16, 2019

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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.