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
tmediaa opened this Issue Jan 6, 2018 · 17 comments

Comments

Projects
None yet
5 participants
@tmediaa

tmediaa 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

This comment has been minimized.

Show comment
Hide comment
@ankurk91

ankurk91 Jan 7, 2018

Contributor

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

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']
}
]
}
});
@tmediaa

This comment has been minimized.

Show comment
Hide comment
@tmediaa

tmediaa 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

tmediaa 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

This comment has been minimized.

Show comment
Hide comment
@ruchern

ruchern Jan 7, 2018

Contributor

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

Contributor

ruchern commented Jan 7, 2018

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

@tmediaa

This comment has been minimized.

Show comment
Hide comment
@tmediaa

tmediaa commented Jan 8, 2018

@ankurk91

This comment has been minimized.

Show comment
Hide comment
@ankurk91

ankurk91 Jan 8, 2018

Contributor

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

Contributor

ankurk91 commented Jan 8, 2018

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

@tmediaa

This comment has been minimized.

Show comment
Hide comment
@tmediaa

tmediaa commented Jan 8, 2018

@ankurk91 thanks body

@JeffreyWay JeffreyWay closed this Jan 16, 2018

@the-webguys

This comment has been minimized.

Show comment
Hide comment
@the-webguys

the-webguys 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?

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

This comment has been minimized.

Show comment
Hide comment
@ankurk91

ankurk91 Aug 23, 2018

Contributor
npm run prod

Will generate render function

Contributor

ankurk91 commented Aug 23, 2018

npm run prod

Will generate render function

@the-webguys

This comment has been minimized.

Show comment
Hide comment
@the-webguys

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

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

This comment has been minimized.

Show comment
Hide comment
@ankurk91

ankurk91 Aug 23, 2018

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@the-webguys

the-webguys 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!)

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

This comment has been minimized.

Show comment
Hide comment
@ankurk91

ankurk91 Aug 23, 2018

Contributor

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

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

This comment has been minimized.

Show comment
Hide comment
@the-webguys

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

This comment has been minimized.

Show comment
Hide comment
@the-webguys

the-webguys 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?

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

This comment has been minimized.

Show comment
Hide comment
@ankurk91

ankurk91 Aug 24, 2018

Contributor

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.

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@the-webguys

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

This comment has been minimized.

Show comment
Hide comment
@the-webguys

the-webguys Aug 27, 2018

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

the-webguys commented Aug 27, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment