parcel uses js modules in the build when the target browser is FF48 #8783

farooqkz · 2023-01-22T14:24:34Z

🐛 bug report

I target FF48 for my webapp and have specified it as browserslist inpackage.json but the resulting build uses Javascript modules which is unsupported by this version of Firefox.

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

{
  "name": "chooj",
  "version": "0.0.0",
  "description": "Matrix client for KaiOS",
  "private": true,
  "scripts": {
    "dev": "parcel",
    "build": "parcel build --dist-dir build --no-source-maps",
    "devbuild": "parcel build --no-optimize --dist-dir build",
    "clean": "npm run clean:parcel",
    "serve": "npm run devbuild && serve ./build",
    "clean:parcel": "rm -rf .parcel-cache build"
  },
  "author": "Farooq Karimi Zadeh",
  "license": "GPLv3+",
  "dependencies": {
    "KaiUI": "git+https://github.com/farooqkz/KaiUIv2.git",
    "classnames": "^2.3.1",
    "core-js": "^3.26.1",
    "inferno": "^8.0.4",
    "inferno-dev-utils": "^6.0.4",
    "inferno-extras": "^8.0.0",
    "jsqr": "^1.4.0",
    "localforage": "^1.9.0",
    "matrix-js-sdk": "^23.0.0",
    "prettier": "^2.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.0",
    "@babel/plugin-transform-modules-commonjs": "^7.19.6",
    "@parcel/transformer-babel": "^2.8.2",
    "@parcel/transformer-sass": "^2.8.2",
    "babel-plugin-inferno": "^6.5.0",
    "buffer": "^5.5.0",
    "crypto-browserify": "^3.12.0",
    "parcel": "^2.8.2",
    "postcss": "^8.2.1",
    "postcss-modules": "^4.3.0",
    "process": "^0.11.10",
    "serve": "^14.1.2",
    "stream-browserify": "^3.0.0",
    "util": "^0.12.3"
  },
  "browserslist": "Firefox 48",
  "targets": {
    "default": {
      "source": [
        "src/index.html",
        "src/manifest.webapp",
        "src/sw.js",
        "src/chooj.png"
      ]
    }
  }
}

🤔 Expected Behavior

It must not use Javascript modules

😯 Current Behavior

The resulting index.html uses JS modules:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=yes"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="stylesheet" href="/index.447d3ccb.css" />
    <script type="module" src="/index.9eecacc1.js"></script>
    <script src="/index.881f05f6.js" nomodule defer></script>
    <title>chooj</title>
  </head>
  <body>
    <div id="root"></div>
    <div id="menu" class="menu"></div>
  </body>
</html>

🔦 Context

I'm using parcel in chooj which is a Matrix client for KaiOS. KaiOS 2.x uses Gecko version used in Firefox 48.

💻 Code Sample

https://github.com/farooqkz/chooj

🌍 Your Environment

Software	Version(s)
Parcel	2.8.3
Node	v18.12.1
npm/Yarn	1.22.19
Operating System	Ubuntu 20.04

The text was updated successfully, but these errors were encountered:

devongovett · 2023-01-22T17:59:13Z

But there's also a nomodule version that should work for older browsers. Is something broken, or you just expected only a nomodule build?

farooqkz · 2023-01-23T07:45:00Z

But there's also a nomodule version that should work for older browsers. Is something broken, or you just expected only a nomodule build?

hmm I see it now. Yeah I expect only that. Since FF 48 does not support modules so why bother building a module and having both module in nomodule in index.html?

Edit: Not sure but I my build seems to be working. I also see two rust-crypto.[hash].js which are not included in the index file.

farooqkz · 2023-01-23T08:49:09Z

Also it seems parcel is using the WASM bundle of a dependency instead of asm.js:

yarn run v1.22.19
$ parcel build --dist-dir build --no-source-maps --detailed-report 12
✨ Built in 59.08s

build/rust-crypto.581d14f6.js                                                            ⚠️  3.83 MB    46.41s
├── node_modules/@matrix-org/matrix-sdk-crypto-js/pkg/matrix_sdk_crypto_js_bg.wasm.js        3.75 MB     787ms
├── node_modules/@matrix-org/matrix-sdk-crypto-js/pkg/matrix_sdk_crypto_js.js              239.52 KB     1.32s
├── node_modules/matrix-js-sdk/lib/rust-crypto/rust-crypto.js                               21.51 KB     1.39s
└── node_modules/matrix-js-sdk/lib/rust-crypto/index.js                                      4.51 KB     1.46s

build/rust-crypto.0e83fa4f.js                                                            ⚠️  3.82 MB    46.42s
├── node_modules/@matrix-org/matrix-sdk-crypto-js/pkg/matrix_sdk_crypto_js_bg.wasm.js         3.7 MB     1.32s
├── node_modules/@matrix-org/matrix-sdk-crypto-js/pkg/matrix_sdk_crypto_js.js              187.45 KB     1.37s
├── node_modules/matrix-js-sdk/lib/rust-crypto/rust-crypto.js                               17.91 KB     1.10s
└── node_modules/matrix-js-sdk/lib/rust-crypto/index.js                                      4.51 KB     1.28s

build/index.9eecacc1.js                                                                  ⚠️  1.92 MB    46.42s
├── node_modules/matrix-js-sdk/lib/client.js                                               496.71 KB     1.22s
├── node_modules/jsqr/dist/jsQR.js                                                         406.34 KB     842ms
├── node_modules/matrix-js-sdk/lib/crypto/index.js                                         298.23 KB     1.47s
├── node_modules/matrix-js-sdk/lib/webrtc/call.js                                          229.46 KB     1.51s
├── node_modules/matrix-js-sdk/lib/models/room.js                                          196.89 KB     1.28s
├── node_modules/matrix-js-sdk/lib/crypto/algorithms/megolm.js                             168.16 KB     1.57s
├── node_modules/matrix-js-sdk/lib/sync.js                                                 138.82 KB     1.05s
├── node_modules/localforage/dist/localforage.js                                            122.8 KB     1.81s
├── node_modules/matrix-js-sdk/lib/webrtc/groupCall.js                                     107.24 KB     1.52s
├── node_modules/browserify-rsa/node_modules/bn.js/lib/bn.js                                95.48 KB     831ms
├── node_modules/browserify-sign/node_modules/bn.js/lib/bn.js                               95.48 KB     532ms
└── node_modules/inferno/dist/index.esm.js                                                  93.57 KB     1.29s
└── + 1042 more assets                                                               


...

farooqkz · 2023-01-23T13:20:50Z

There is another problem:

Unhandled promise rejection ReferenceError: AbortController is not defined
Stack trace:
e.exports.FetchHttpApi<@app://chooj.bananahackers.net/index.881f05f6.js:1:462330
m@app://chooj.bananahackers.net/index.881f05f6.js:1:458632
ke@app://chooj.bananahackers.net/index.881f05f6.js:1:321352
e.exports.createClient@app://chooj.bananahackers.net/index.881f05f6.js:1:2167
Tk</</</<@app://chooj.bananahackers.net/index.881f05f6.js:23:162224

FF48 does not support AbortController. Should I open another issue? Or perhaps both are the same issue that the code is not getting transpiled for FF48.

mischnic · 2023-01-23T15:49:56Z

What Parcel (and most other tools) do is rewriting new syntax into old syntax, and potentially polyfilling globals from the standard library (using https://github.com/zloirock/core-js). This is meant by "transpiling".

Adding other global objects, such as AbortController, is usually the developers responsibility.

And same goes for Wasm, which could in theory be transpiled to asmjs but I'm not aware of any bundler doing this automatically (both because it's not trivial and because it's not really worth it anymore as Wasm is pretty well supported by now).

farooqkz · 2023-01-24T16:47:49Z

What Parcel (and most other tools) do is rewriting new syntax into old syntax, and potentially polyfilling globals from the standard library (using https://github.com/zloirock/core-js). This is meant by "transpiling".

Adding other global objects, such as AbortController, is usually the developers responsibility.

What is difference between AbortController and other globals? Shouldn't this get transpiled using core-js as well?

And same goes for Wasm, which could in theory be transpiled to asmjs but I'm not aware of any bundler doing this automatically (both because it's not trivial and because it's not really worth it anymore as Wasm is pretty well supported by now).

How can I tell parcel to transpile WASM to asm.js? Or is it the job for some other tool?

mischnic · 2023-01-24T18:04:56Z

What is difference between AbortController and other globals? Shouldn't this get transpiled using core-js as well?

That one is specified in the DOM API spec, not the JS spec itself: https://dom.spec.whatwg.org/#interface-abortcontroller
But that line does become blurry as well

How can I tell parcel to transpile WASM to asm.js? Or is it the job for some other tool?

Parcel doesn't do this.
There are some tools to convert WASM to JS, e.g. https://github.com/WebAssembly/binaryen (search for "wasm2js").

farooqkz · 2023-01-26T11:23:07Z

What is difference between AbortController and other globals? Shouldn't this get transpiled using core-js as well?

That one is specified in the DOM API spec, not the JS spec itself: https://dom.spec.whatwg.org/#interface-abortcontroller But that line does become blurry as well

How can I tell parcel to transpile WASM to asm.js? Or is it the job for some other tool?

Parcel doesn't do this. There are some tools to convert WASM to JS, e.g. https://github.com/WebAssembly/binaryen (search for "wasm2js").

Okay but still the problem that parcel puts module in my index.html remains.

devongovett · 2023-01-26T14:11:53Z

It's not a "problem" because the nomodule script also exists and will work for old browsers. When you specify Firefox 48, you're really telling parcel the minimum browser version to support. More modern browsers will use the module version.

farooqkz · 2023-01-27T09:59:53Z

It's not a "problem" because the nomodule script also exists and will work for old browsers. When you specify Firefox 48, you're really telling parcel the minimum browser version to support. More modern browsers will use the module version.

Yeah you are right. But I want exactly FF48 not at least FF48. What should I do?

devongovett · 2023-01-27T15:05:19Z

There is no way to do that. Firefox 48 is almost 7 years old. Why would you only want to target that and nothing else?

farooqkz · 2023-01-30T12:08:39Z

There is no way to do that. Firefox 48 is almost 7 years old. Why would you only want to target that and nothing else?

Sorry for the late reply. I am writing an app for KaiOS. KaiOS 2.x is based on Gecko from FF48. KaiOS 3.x however, is based on a recent one.

Edit: Is there a way to disable module thing entirely?

farooqkz · 2023-02-07T02:15:36Z

There is no way to do that. Firefox 48 is almost 7 years old. Why would you only want to target that and nothing else?

Sorry for the late reply. I am writing an app for KaiOS. KaiOS 2.x is based on Gecko from FF48. KaiOS 3.x however, is based on a recent one.

Edit: Is there a way to disable module thing entirely?

bump

devongovett · 2023-02-07T06:02:06Z

If you use HTML as an entry, then <script type="module"> dependencies will always produce a module, and will produce a fallback if any targets require it. If you do not want a module at all, then you cannot use an HTML entry. Instead, you can configure Parcel to output using the "global" output format (the default for non-library JS entries).

farooqkz · 2023-02-18T14:47:29Z

Can you provide an example config? I've done so and it doesn't produce a HTML file anymore:

{
  "name": "chooj",
  "version": "0.0.0",
  "description": "Matrix client for KaiOS",
  "private": true,
  "scripts": {
    "build": "rm -rf build && parcel build --dist-dir build --no-source-maps --detailed-report 12",
    "devbuild": "rm -rf build && parcel build --no-optimize --dist-dir build",
    "clean": "yarn run clean:parcel",
    "serve": "yarn run devbuild && serve ./build",
    "clean:parcel": "rm -rf .parcel-cache build",
    "lint": "yarn eslint src"
  },
  "author": "Farooq Karimi Zadeh",
  "license": "GPLv3+",
  "dependencies": {
    "KaiUI": "git+https://github.com/farooqkz/KaiUIv2.git",
    "abortcontroller-polyfill": "^1.7.5",
    "classnames": "^2.3.1",
    "core-js": "^3.26.1",
    "inferno": "^8.0.4",
    "inferno-dev-utils": "^6.0.4",
    "inferno-extras": "^8.0.0",
    "jsqr": "^1.4.0",
    "localforage": "^1.10.0",
    "matrix-js-sdk": "^23.0.0",
    "prettier": "^2.8.4",
    "xmimetype": "^1.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.0",
    "@babel/plugin-transform-modules-commonjs": "^7.19.6",
    "@parcel/transformer-babel": "^2.8.2",
    "@parcel/transformer-sass": "^2.8.2",
    "babel-plugin-inferno": "^6.5.0",
    "buffer": "^5.5.0",
    "crypto-browserify": "^3.12.0",
    "eslint": "5.x",
    "eslint-config-inferno-app": "^7.0.2",
    "eslint-plugin-import": "2.x",
    "eslint-plugin-inferno": "^7",
    "eslint-plugin-jsx-a11y": "6.x",
    "parcel": "^2.8.2",
    "postcss": "^8.2.1",
    "postcss-modules": "^4.3.0",
    "process": "^0.11.10",
    "serve": "^14.1.2",
    "stream-browserify": "^3.0.0",
    "util": "^0.12.3"
  },
  "browserslist": "Firefox 48",
  "targets": {
    "default": {
      "source": [
        "src/index.js",
        "src/manifest.webapp",
        "src/sw.js",
        "src/chooj.png"
      ],
      "outputFormat": "global"
    }
  }
}

dongmingchao · 2023-03-30T05:53:29Z

run only "parcel", in dist/index.html will rm <script type="module">;
after run "parcel build", just rm <script type="module"> line and works fine, that line js source file could rm

github-actions · 2023-09-26T12:03:07Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

mischnic added the 🕐 Waiting label Jan 22, 2023

farooqkz mentioned this issue Feb 18, 2023

Reduce bundle size farooqkz/chooj#67

Closed

github-actions bot added the Stale Inactive issues label Sep 26, 2023

farooqkz closed this as not planned Won't fix, can't repro, duplicate, stale Oct 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

parcel uses js modules in the build when the target browser is FF48 #8783

parcel uses js modules in the build when the target browser is FF48 #8783

farooqkz commented Jan 22, 2023

devongovett commented Jan 22, 2023

farooqkz commented Jan 23, 2023 •

edited

Loading

farooqkz commented Jan 23, 2023

farooqkz commented Jan 23, 2023

mischnic commented Jan 23, 2023

farooqkz commented Jan 24, 2023 •

edited

Loading

mischnic commented Jan 24, 2023

farooqkz commented Jan 26, 2023

devongovett commented Jan 26, 2023

farooqkz commented Jan 27, 2023

devongovett commented Jan 27, 2023

farooqkz commented Jan 30, 2023 •

edited

Loading

farooqkz commented Feb 7, 2023

devongovett commented Feb 7, 2023

farooqkz commented Feb 18, 2023

dongmingchao commented Mar 30, 2023

github-actions bot commented Sep 26, 2023

parcel uses js modules in the build when the target browser is FF48 #8783

parcel uses js modules in the build when the target browser is FF48 #8783

Comments

farooqkz commented Jan 22, 2023

🐛 bug report

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

🤔 Expected Behavior

😯 Current Behavior

🔦 Context

💻 Code Sample

🌍 Your Environment

devongovett commented Jan 22, 2023

farooqkz commented Jan 23, 2023 • edited Loading

farooqkz commented Jan 23, 2023

farooqkz commented Jan 23, 2023

mischnic commented Jan 23, 2023

farooqkz commented Jan 24, 2023 • edited Loading

mischnic commented Jan 24, 2023

farooqkz commented Jan 26, 2023

devongovett commented Jan 26, 2023

farooqkz commented Jan 27, 2023

devongovett commented Jan 27, 2023

farooqkz commented Jan 30, 2023 • edited Loading

farooqkz commented Feb 7, 2023

devongovett commented Feb 7, 2023

farooqkz commented Feb 18, 2023

dongmingchao commented Mar 30, 2023

github-actions bot commented Sep 26, 2023

farooqkz commented Jan 23, 2023 •

edited

Loading

farooqkz commented Jan 24, 2023 •

edited

Loading

farooqkz commented Jan 30, 2023 •

edited

Loading