[Bug] Unexpected token, expected "," (comma) when compiling for Production

jakedowns commented 2 years ago

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

jakedowns commented 2 years ago

seems like adding "exclude": "VueTemplateBabelCompiler", to my .babelrc file may have fixed the issue

i'm not 100%, since now the page is having other issues. but the compiler is no longer throwing an error

will see if the other page issues are related...

JuniorTour commented 2 years ago

Thanks for your feedback.

But I can't reproduce your error, I made a reproduction DEMO:

https://stackblitz.com/edit/github-vue-template-babel-compiler-cnvbcs-e6fkuw?file=components%2FTutorial.vue&terminal=dev

Could you fork it, and try to reproduce your error?

I wish we could fix this error ASAP.

JuniorTour / vue-template-babel-compiler