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:

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)

Most upvoted comments

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:

{
  "extends": "@parcel/config-default",
  "optimizers": {
    "*.js": ["@parcel/optimizer-terser"]
  }
}

Thanks @devongovett, appreciate it! For me that yields a perfectly valid bundle that passes all tests 👌 Hope that helps in your investigation.

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?

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

var Word_List = (function () {
  var r = {},
    t = new Array();
  return (
    (r.isInList = function (r) {
      var o = (r = r.toLowerCase()).charAt(0);
      return t[o].indexOf(r) > -1;
    }),
    (r.getRandomWord = function (r) {
      0 == (r = r || 0) && (r = Math.floor(7 * Math.random()) + 4),
        r < 4 && (r = 4),
        r > 10 && (r = 10);
      var o,
        a,
        n = Math.floor(26 * Math.random()),
        e = String.fromCharCode(n + 97);
      do {
        (o = Math.floor(Math.random() * t[e].length)), (a = t[e][o]);
      } while (a.length != r);
      return a;
    }),
    (r.loadBank = function (r) {
      var o = r[12].charAt(0);
      if (!o)
        throw "Not able to get first letter from word to determine word bank.";
      t[o] = r;
    }),
    r
  );
})();
//# sourceMappingURL=testing.8ef956dc.js.map

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 with type="module".