[Bug] Unexpected token, expected "," (comma) when compiling for Production | Vue2 + Laravel Mix #39
Description
Current behavior
when compiling for dev, the compiler seems to work great
when compiling for prod, i get the following error (38 times, for different vue components)
ERROR in ./resources/js/app_next/pages/search/ResultsPage.vue?vue&type=template&id=fbf64694& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/app_next/pages/search/ResultsPage.vue?vue&type=template&id=fbf64694&)
Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
SyntaxError: /root/LinuxBindMounted/wright/app/VueTemplateBabelCompiler: Unexpected token, expected "," (8:0)
6 | var _c=_vm._self._c||_h;
7 | return _c("div",[_c("h1",[_vm._v("search results page")])])}
> 8 | var __staticRenderFns__ = []
| ^
at instantiate (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:72:32)
at constructor (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:358:12)
at Object.raise (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:3334:19)
at Object.unexpected (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:3372:16)
at Object.expect (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:4001:28)
at Object.parseExprList (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:13895:14)
at Object.parseArrayLike (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:13785:26)
at Object.parseExprAtom (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:12878:23)
at Object.parseExprAtom (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:8033:20)
at Object.parseExprSubscripts (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:12539:23)
at Object.parseUpdate (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:12518:21)
at Object.parseMaybeUnary (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:12489:23)
at Object.parseMaybeUnaryOrPrivate (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:12283:61)
at Object.parseExprOps (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:12290:23)
at Object.parseMaybeConditional (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:12260:23)
at Object.parseMaybeAssign (/root/LinuxBindMounted/wright/app/node_modules/@babel/parser/lib/index.js:12213:21)
ModuleBuildError: Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
SyntaxError: /root/LinuxBindMounted/wright/app/VueTemplateBabelCompiler: Unexpected token, expected "," (8:0)
SearchResults.vue: (i thought it was the break tags causing an issue so i commented them out, but the issue remains)
<template>
<div>
<!-- <br/><br/><br/><br/><br/><br/><br/><br/> -->
<h1>search results page</h1>
</div>
</template>
<script>
export default {
}
</script>Expected behavior
should compile without errors
Extra
node v14.16.1
webpack: 5.70.0
webpack-cli: 4.9.2
webpack-dev-server 4.7.4
"babel-preset-minify": "^0.5.1",
"@babel/core": "^7.17.5",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
"@babel/plugin-transform-runtime": "^7.15.8",
"@babel/polyfill": "^7.12.1",
"@babel/register": "^7.12.10",
"@babel/runtime": "^7.16.3",
"@types/babel__core": "^7.1.18",
"@vue/cli-plugin-babel": "^4.5.15",
"@inertiajs/inertia-vue": "^0.7.2",
"@vue/cli-service": "^5.0.1",
"vue": "^2.6.14",
"vue-loader": "^15.9.8",
"vue-server-renderer": "^2.6.12",
"vue-template-babel-compiler": "^1.1.3",
"vue-template-compiler": "^2.6.12",
"vuex": "^3.6.0",
"laravel-mix-merge-manifest": "^2.0.0",
"laravel-mix": "^6.0.43",
Laravel Mix / Webpack Config:
mix.override((webpackConfig)=>{
webpackConfig.module.rules = _.map(webpackConfig.module.rules, function (rule) {
if(rule.test == "/\\.vue$/"){
// console.log('overwriting',JSON.stringify(rule));
rule.use[0].loader = 'vue-loader'
rule.use[0].options.compiler = require('vue-template-babel-compiler')
}
return rule
})
})
.vue({ version: 2, extractStyles: false, useVueStyleLoader: true, optimizeSSR: true })