Issue with vue.js and building for production

[carbontwelve]

This is a 🐛 bug report.

When using parcel to build for production it breaks my vue.js application. This only happens when building for production, using parcel in development works with no issue.

🎛 Configuration (.babelrc, package.json, cli command)

package.json:

{
  "dependencies": {
    "vue": "^2.5.16",
    "vue-hot-reload-api": "^2.3.0"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^1.1.0",
    "parcel-bundler": "^1.8.1",
    "vue-template-compiler": "^2.5.16"
  }
}

.babelrc

{
  "presets": [
    "env"
  ]
}

🤔 Expected Behavior

When building https://github.com/photogabble/vuejs-incremental-game-tutorial using the command parcel build index.html --public-url=./ --out-file=index.html and uploading to http://builds.photogabble.co.uk/parcel-js-vue-bug-report/ the app should work as expected (when it does work locally in dev mode.)

Below shows a screenshot of the expected behavior:

😯 Current Behavior

The app doesn't work as expected. Instead certain buttons are broken as shown in below screen shot (or if you visit that page):

In vue the component is loaded via <Resource name="Ore Reserves" units="tons" v-on:doBuy="buyOre" v-on:doSell="sellOre" v-bind:amount="ore" v-bind:buyPrice="oreBuy" v-bind:sellPrice="oreSell" v-bind:credits="credits" transactional></Resource> and the buy/sell prices are passed through from App.vue as not being the zero being displayed.

Given that this only happens when parcel bundles for production I feel that this is a bug with parcel and not with my code.

💁 Possible Solution

The only solution I have found is to run parcel index.html --public-url=./ --out-file=index.html and then upload the development files from the dist folder. This can be seen working at http://builds.photogabble.co.uk/vuejs-incremental-game-tutorial-p1/.

This tells me that there is something wonky going on with the build process for production.

🔦 Context

I was just trying to get a demo of my project online to share and it wasn't working, which is odd to me because it does work when built for development.

💻 Code Sample

• Repo https://github.com/photogabble/vuejs-incremental-game-tutorial
• Broken production http://builds.photogabble.co.uk/parcel-js-vue-bug-report/
• Working production http://builds.photogabble.co.uk/vuejs-incremental-game-tutorial-p1/

🌍 Your Environment

Software	Version(s)
Parcel	1.8.1
Node	8.9.4
npm/Yarn	5.6.0/1.6.0
Operating System	Windows 10

[luikore]

I met this issue too.

I think it is related to uglify name mangling: parcel concats some prelude js with uglified code. But uglify-es changes variable / function names in compression without knowing what name has been used by outside code.

Adding a .uglifyrc with {mangle: false} should work around this problem.

[carbontwelve]

I added a .uglifyrc as @luikore suggests but the result from parcel build is still broken. I do think its something to do with uglification changing variable names... possibly lower-casing my camel-cased variables.

edit:

After realizing this is indeed an issue with uglify mangling and after adding .uglifyrc, I have managed to fix things for the time being by disabling minification on build completely. parcel build --no-minify results in a working build.

This tells me that there is something wrong with parcels usage of uglify,

[houd1ni]

Affected me too. Looks like something tries to minify HTML/templates before they transpiled by vue-template transpiler.

<div v-for="(foo, key) in bar> ... </div>" => <div prop="[Object, Object]"> ... </div>

And half of my app is just blank. Without any errors!

[DeMoorJasper]

Perhaps we can add a check to html and not minify the html if it's part of another asset

this:

if (this.options.minify) {
	await htmlnanoTransform(this);
}

to:

if (this.options.minify && !this.options.rendition) {
	await htmlnanoTransform(this);
}

This is the line that should change:
https://github.com/parcel-bundler/parcel/blob/master/src/assets/HTMLAsset.js#L158

[houd1ni]

@DeMoorJasper

Thank you! But the trick does work only if we do the same with pretransform simultaneously with transform method that you mentioned. Please, check that it's a good solution and add this to the project!

The solution is:

  async pretransform() {
    if(!this.options.rendition) {
      await posthtmlTransform(this);
    }
  }

  async transform() {
    if (this.options.minify && !this.options.rendition) {
      await htmlnanoTransform(this);
    }
  }

By the way, in a project with .ts, vue, .js, .json and assets there're nothing left unminified after applying the trick 👍

[SteffenL]

The problem (in my case) is with posthtml and its lack of support for self-closing custom tags (I wrote some details in #1363).

I am not sure makes sense to transform the template multiple times as it will go through the Vue template compiler (or whatever compiler) anyway. As long as linked assets (images, etc) within the template are still bundled and linked in the output as expected, then it seems reasonable to me to skip the transformation.

If minification is enabled, then I think that the compiled template (I mean the final HTML) should be minified as well, just after compilation rather than before. Or maybe the minification should be done only on the "root" documents?

Related: #1103 #1316

[houd1ni]

@SteffenL

Thank you for the great investigation!

I believe, that "the final HTML" after vue-template-compiler should not be a HTML, but rather a render function, that is plain JS, so, it is the reason why I've got the minified bundle without html minification in my project without .html assets.

[DeMoorJasper]

@houd1ni I think your solution looks good, the only concern I have regarding this fix is assets that get compiled down to html, if it's the final transform than it should be responsible for the minification. Which if I'm not mistaken won't happen in your solution

[SteffenL]

@houd1ni You are right. I was having a dumb moment there thinking the template was included in the JS bundle! So when the template compiles to a render function/JSX, there is no point in minifying the template. It should still be possible for other asset types to compile to HTML and apply minification.

[houd1ni]

@DeMoorJasper

So, for instance, if one has included her own .html in a project, that IS NOT a .vue file, her bundle will have that unminified html in the output ? If not, could you, please, give an thought experiment, that can produce such faulty resaults? Thank you!

(In the case of .vue, the vue compiler itself will turn it to JS, that I've already mentioned, then uglify will minify that js).

[DeMoorJasper]

I meant languages like pug and markdown that get transpiled down to html @houd1ni

[gorbypark]

I think this is also affecting me..parcel index.html works great, parcel build index.html results in a blank page, with no errors. I can see all the assets are loaded but haven't been able to track down the exact cause yet.