parcel: parcel build produces wrong minified js
🐛 bug report
I used https://github.com/TimTCrouch/WordList-JS in my app (which basically involves including https://github.com/TimTCrouch/WordList-JS/blob/master/src/wordList.js and https://github.com/TimTCrouch/WordList-JS/blob/master/src/wordBank.js in my index.html) and used “parcel build” to produce a bundle for browsers.
“parcel build” produced a wrong minified js for wordList.js with 2 issues:
- the global variable Word_List https://github.com/TimTCrouch/WordList-JS/blob/master/src/wordList.js#L10 was stripped
- the return statement https://github.com/TimTCrouch/WordList-JS/blob/master/src/wordList.js#L71 was stripped
After the 2 mentioned issues were manually fixed, my bundle worked. I reproduced the same error using the original https://github.com/TimTCrouch/WordList-JS/blob/master/testing.html instead of my index.html
🎛 Configuration (.babelrc, package.json, cli command)
The test setup I cloned https://github.com/TimTCrouch/WordList-JS to add my setup for using parcel here: https://github.com/minnie80/test-build-wordlistjs/blob/test-build-with-parcel/package.json
cli commands Build: npm run build Test: npm run prod
The test app http://localhost:3000/testing.html
🤔 Expected Behavior
The minified js in the bundle produced by “parcel build” should be correct. The corrected script:
var Word_List = (function () {
var t = {},
o = [];
(t.isInList = function (t) {
return o[(t = t.toLowerCase()).charAt(0)].indexOf(t) > -1;
}),
(t.getRandomWord = function (t) {
0 == (t = t || 0) && (t = Math.floor(7 * Math.random()) + 4),
t < 4 && (t = 4),
t > 10 && (t = 10);
var r,
n,
a = String.fromCharCode(Math.floor(26 * Math.random()) + 97);
do (r = Math.floor(Math.random() * o[a].length)), (n = o[a][r]);
while (n.length != t);
return n;
}),
(t.loadBank = function (t) {
var r = t[12].charAt(0);
if (!r)
throw "Not able to get first letter from word to determine word bank.";
o[r] = t;
});
return t;
})();
😯 Current Behavior
The incorrect script produced by “parcle build” (re-formatted by prettier.io):
!(function () {
var t = {},
o = [];
(t.isInList = function (t) {
return o[(t = t.toLowerCase()).charAt(0)].indexOf(t) > -1;
}),
(t.getRandomWord = function (t) {
0 == (t = t || 0) && (t = Math.floor(7 * Math.random()) + 4),
t < 4 && (t = 4),
t > 10 && (t = 10);
var r,
n,
a = String.fromCharCode(Math.floor(26 * Math.random()) + 97);
do (r = Math.floor(Math.random() * o[a].length)), (n = o[a][r]);
while (n.length != t);
return n;
}),
(t.loadBank = function (t) {
var r = t[12].charAt(0);
if (!r)
throw "Not able to get first letter from word to determine word bank.";
o[r] = t;
});
})();
💁 Possible Solution
🔦 Context
💻 Code Sample
🌍 Your Environment
Software | Version(s) |
---|---|
Parcel | v2.9.3 |
Node | v18.16.1 |
npm/Yarn | npm v9.5.1 |
Operating System | Windows 10 |
About this issue
- Original URL
- State: open
- Created a year ago
- Reactions: 4
- Comments: 16 (3 by maintainers)
The next question is whether this is a bug in Parcel itself or in the new SWC minifier that we switched to in v2.9. Could you all try building your project with
@parcel/optimizer-terser
instead and see if that fixes the issue? To do that, install@parcel/optimizer-terser
with npm and add this to your.parcelrc
:Thanks @devongovett, appreciate it! For me that yields a perfectly valid bundle that passes all tests 👌 Hope that helps in your investigation.
Yes, it works with 2.8.1. The minified for https://github.com/minnie80/test-build-wordlistjs/blob/test-build-with-parcel/src/wordList.js formatted by prettier.io
Does it work with the
--no-optimize
CLI flag?I think I may be experiencing something similar with our project. The local dev server will run/build the code properly, but the minified build output is missing a symbol for react-router which breaks the entire app. This is a problem for us in 2.9.2 and 2.9.3 but not in 2.8.1. Out of curiosity, does your example work in 2.8.1?
I am using a
<script>
tag withtype="module"
.