production minify code doesn't work well(npm run build), but development is ok(npm start)

[ccjoe]

npm scripts pls read package.json below

🐛 bug report

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

babelrc

{}

package.json

{
  "name": "xxx",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "cross-env NODE_ENV=development rimraf dist/development & parcel index.html --open -d dist/development/",
    "build": "cross-env NODE_ENV=production rimraf dist/production & parcel build src/index.js --public-url ./dist/production -d dist/production/ --detailed-report"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "jsonp": "^0.2.1",
    "normalize.css": "^8.0.0",
    "query-string": "^6.1.0",
    "scroll-to-element": "^2.0.0",
    "vue": "^2.5.16",
    "vue-hot-reload-api": "^2.3.0",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^2.1.0",
    "babel-core": "^6.26.3",
    "cross-env": "^5.2.0",
    "cssnano": "^4.0.5",
    "node-sass": "^4.9.2",
    "pug": "^2.0.3",
    "vue-template-compiler": "^2.5.16"
  },
  "engines": {
    "node": "8"
  }
}

🤔 Expected Behavior

production minify code work normally。(if i minify development code by other minify tool, work well too )

😯 Current Behavior

production minify code doesn't work well, and have no error in console(page can't render normal, it's blank); development code work well, ,

💁 Possible Solution

production minify bug?

🌍 Your Environment

parcel with vue project

Software	Version(s)
Parcel	1.9.7
Node	8.9.4
npm/Yarn	5.6.0
Operating System	windows 7

[BenSapiens]

Perhaps something I noticed just yesterday may be of some help.

Importing Fontawesome's SVG icons, even individually — e.g. import { faBowlingBall, faFighterJet, faFeatherAlt } from "@fortawesome/free-brands-svg-icons" — imports the whole damn package. Tree shaking enabled with --experimental-scope-hoisting or scopeHoist: true manages to clear the unused detritus, but only when minification is disabled. The total bundle file sizes with and without minification are 646K and 336K, respectively. (To reiterate, those numbers are in the right order.)

[DeMoorJasper]

@BenSapiens But you don't have any errors, otherwise this is a treeshaking issue and probably unrelated to this issue?

[BenSapiens]

@DeMoorJasper You're right. I missed the bit about the page not rendering normally. My apologies.

[ccjoe]

I found this bug cause vue component data not render normally in production, but development is ok.
I'm not sure is a bug or problems of use

[kzc]

Without a complete standalone test case to reproduce the problem, this issue may as well be closed.

[ccjoe]

It's up to u

[freemagee]

I came here looking for this. I have a Vuejs project that works under dev conditions but not after a build.
The build process is successful, I can host the project and run it, but it seems like the app is missing components. The first component is present, looks right and works. It is meant to feed data back to it's parent, which then passes that as props to other child components. Those components do not show up.

I had a hunch it might be to do with minification, so I changed my npm build script from:

rimraf dist/* && parcel build src/index.html

to

rimraf dist/* && parcel build src/index.html --no-minify

And now the "build" version works.

My project: https://github.com/freemagee/sugar-cubed/tree/parcel

I am sorry that my project is also not a complete standalone test case as I use an API key, which is not included in the project. I will try to host a working and non working version of the app if that may help.

[ccjoe]

@freemagee yes, agree with u,
and my npm build is no-minify too, and then minify by other uglify tool, it's work well.

 "build-hack": "cross-env NODE_ENV=production rimraf dist/production & parcel build src/index.js -d dist/production/ --no-minify --no-source-maps --detailed-report",

but i found other problem, the code after build has arrow function, some low version webview browser can't run

module.exports = str => encodeURIComponent(str).replace(/[!'()*]/g, x => '%' + x.charCodeAt(0).toString(16).toUpperCase());

this code from the dependency of query-string, but it didn't build by parcel(browserslist include ie10)?

kevva/strict-uri-encode#7

[freemagee]

I had not seen it until now, but this issue has been referenced before:

#1294
#1363

I think I am going to follow your advice and use another step for the minification. Probably look at babel-minify.

I am sorry, I do not know the solution to your arrow function issue. Off the top of my head I would expect babel to deal with that if you use it in your project.

[DeMoorJasper]

The arrow function should have been extracted out, babel-preset-env runs over every module.

About the minifications if you could create some kind of reproduction the parcel or terser team can have a look at it depending on whether it's a parcel bug or not (Preferably not an entire project with dozens of files)

[amankapoor]

I have a similar issue, my external css files (from other packages) are not being included in prod build. Let me create a demo repo to bring the issue to light because --no-minify is not working for me.

[DeMoorJasper]

If no-minify isn't working this is an unrelated issue, please create a new issue. @amankapoor

[amankapoor]

@DeMoorJasper Done. Issue is at #1910 :)

[freemagee]

I have hosted two builds. Standard looks ok initially, but does not work. --no-minify works. Hope this helps a bit. Just to be clear this is a Vue.js project that uses single file vue components.

Standard build
http://neilmagee.com/project/sugar-cubed/parcel/minified-build/
Js only: http://neilmagee.com/project/sugar-cubed/parcel/minified-build/js.603f7a40.js

--no-minify flag
http://neilmagee.com/project/sugar-cubed/parcel/non-minified-build/
Js only: http://neilmagee.com/project/sugar-cubed/parcel/non-minified-build/js.cfe7c1ad.js

[eeve]

I also encountered a similar problem, I found a solution: change all <component-name /> to <component-name></component-name>

[guillenotfound]

We can use:

https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-self-closing.md

But that will only hide the real issue...

[domoritz]

I have another example project.

When I build https://github.com/uwdata/falcon with

yarn parcel build flights-mapd/index.html

The app starts but when I try to draw a brush in one chart (click and drag), the others are empty.

But when I build with

yarn parcel build flights-mapd/index.html --no-minify

the other charts update correctly. Is this part of this issue or should I file a separate issue?

[RPDeshaies]

The arrow function should have been extracted out, babel-preset-env runs over every module.
@DeMoorJasper the arrow function is not being converted and is living inside strict-uri-encode which is part of the module query-string which is inside the package.json.

I have the exact same problem and the only solution I have found is to use https://github.com/ljharb/qs instead of query-string.

To reproduce, just create a project with a dependency on query-string and use babel to compile it.

You will end up with this code in your app.js:

module.exports = str => encodeURIComponent(str).replace(/[!'()*]/g, x => '%' + x.charCodeAt(0).toString(16).toUpperCase());

As already state by @ccjoe
And what triggered my issue/question here : #2035

[DeMoorJasper]

Got it, it's probably a mismatch between babel and terser, as terser doesn't look at babelrc or browserslist unfortunately.

Might just be as easy as changing the terser config inside parcel to target an older js version

[ccjoe]

@RPDeshaies query-string readme.md has mentioned

“If you want support for older browsers, use version 5: npm install query-string@5.”

so qs or query-string@5

[RPDeshaies]

oh nice catch @ccjoe

Might just be as easy as changing the terser config inside parcel to target an older js version
@DeMoorJasper should we open another issue for that specifically ?

[DeMoorJasper]

@RPDeshaies you could debug it and try it, it should not be hard at all. But no need to open a seperate issue, unless you want me to close this one.

I'll just try to get this fixed and open a PR real quick myself it's only a couple minutes work

[DeMoorJasper]

I'm very confused with this. Is this off-topic or is the title just completely wrong as both dev and production give an arrow function as far as I've experimented with it.

[RPDeshaies]

@DeMoorJasper I have the impression that @ccjoe 's title might be wrong or it's something else because @ccjoe stated

but i found other problem, the code after build has arrow function, some low version webview browser can't run

So it might be two unrelated issues ?

[DeMoorJasper]

Found the bug, it uses node as a fallback and if the module has no known target it just doesn't get compiled/transformed. Seems pretty strange to me, opened a PR to fix this, see #2073

Please have a look at the PR, I'll try get the tests to work, but they pretty much emulate something that could happen in the real world, although probably a really bad thing. (Having experimental JS features in node_modules)

[ccjoe]

I'm sorry, minification and build remain arrow function are 2 issues.
minification cause production can't render page,
and arrow function is not relate with minification, build without minification it was existed
and this issue for minification, thx
forgive me by my poor english : )

[DeMoorJasper]

Alright so I'm gonna close this issue as it became a mess of 2 or more different issues and an issue shouldn't contain multiple issues as that makes tracking progress pretty hard and one of the issues got resolved.

About the arrow function issue, apparently by design Parcel does not transform any package that doesn't contain an engines or browserslist. And the package mentioned in this issue, does not have an accurate browserslist, so it leaves the code as is.