Module build failed: SyntaxError for version 1.9.0

[katastrofix]

After the update to 1.9.0 the building process using webpack and vue-loader fails using Vue-loader@14.2.2. This Vue-loader version has an internal dependency to vue-template-es2015-compiler. The vue-loader's package.json has a compatible version semantic (""vue-template-es2015-compiler": "^1.6.0"") which probably directs it to the latest compatible. The last successful build with Vue-loader@14.2.2 used vue-template-es2015-compiler@1.8.2 .

Below is the error:

The console log shows the error in the compiled file that is generated from the vue-template component rather than in the pre-compiled template source code.

[edanlewis]

Same here. We're using vue-loader v14.2.1 and just started getting these errors a few hours ago.

[Hammster]

The issues seams to be with the parsing of v-model directive. At least for me.

[owenallenaz]

Just found this issue myself... I was able to correct it by manually specifying

"vue-template-es2015-compiler" : "1.8.2",
"@vue/component-compiler-utils" : "2.5.2"

In my package.json to revert back to older versions of the package.

edit: And now I am implementing package-lock.json to prevent this from happening again. I wasn't using it previously which allowed this issue to even affect me.

[sustained]

Yeah, repro steps (at least at the time of this comment) are simply:

vue create foo 
cd foo
npm run serve

Then just add <input type="text" v-model="foo" /> to src/App.vueand define foo in data and it will blow up.

Definitely seems to be v-model. :tongue:

[deadsandro]

For Yarn users (https://yarnpkg.com/lang/en/docs/selective-version-resolutions/):

yarn -D add @vue/component-compiler-utils@2.5.2
yarn -D add vue-template-es2015-compiler@1.8.2

And also add resolutions field to package.json

  "resolutions": {
    "@vue/component-compiler-utils": "2.5.2",
    "vue-template-es2015-compiler": "1.8.2"
  }

only version lock in package.json without resolution field didn't work for me

[yyx990803]

Latest dist tag on npm has been pinned to 1.8.2 (along with @vue/component-compiler-utils@2.5.3) - reinstalling dependencies should work now while we investigate the root cause.

[yyx990803]

Fixed in 1.9.1.

[MosheAtOwal]

https://github.com/vuejs/vue-template-es2015-compiler/issues/14#issuecomment-466231288

It’s actually more than v-model. Change it to v-model.lazy, and it works.

I did some spelunking into the vue compiler and it’s anywhere inside a generated action, like @input, which has a return statement in it.

The vue compiler translates v-model into a value/action pair. Specifically for inputs, it generates a short circuit if statement for IME compatibility. Vue outputs on a single line, and the bug manifests. I’ve seen this with slots and v-on, too.

If vue-compiler outputs if (foo) return; doBar(), the transpiled output adds curlies around return; doBar(), resulting in unreachable code and for some reason that missing curly.

I stumbled on this because I was working with a teammate to upgrade our team’s project from a CLI 2 template. We followed this blog post and eventually hit this bug. So we reduced it to the input tag with a non-range type. (Like, this bug doesn’t impact radio or checkbox inputs.)

Ok, so what changed between the old and the new project? Time to start digging into the configs. I couldn’t find anything significant.

We also reduced to the base case of an input, and found that text type and generated v-on to be a problematic case of code generation.

My next step was to generate a new project with Vue CLI 3, and add that input. It worked. And the error was not present. So I tried using vue inspect but the Webpack config was the same for a fresh CLI 3 project and my upgraded project.

So now we have the old project, new project, and the test input project. Only new project fails. Webpack config seem the same.

Then I spent most of the next two days researching, reading up on Webpack, Babel, and looking at Vue source code and configs.

Today my teammate spun up a repl and tried testing the vue compiler and es2015 transpired directly. We hit a snag and ran out of time, but after all of this I was thinking it might be ESLint. My teammate suggested filing a bug here, so started that process.

Thatd when I saw that vue info was a thing. That led me to notice the minor version bump on this package and I came here looking for open issues.

Takeaways for me:

• vue info
• Is there a way to trace which plugin or loader made which change to a Webpack built module?
• is there a way to ensure that these minor patches are installed?