swc icon indicating copy to clipboard operation
swc copied to clipboard

Core-js forEach import polyfill not working, Babel with the same config works fine

Open gitrequests opened this issue 1 year ago • 3 comments

Describe the bug

SWC does not import forEach polyfill from core-js. Babel with the same config works fine (Import is present in the code: require("core-js/modules/web.dom-collections.for-each.js");). Steps to reproduce:

  1. Init npm and install dependencies npm init && npm i -D @swc/cli @swc/core
  2. Create index.js entry file with following content
document.querySelectorAll('div').forEach(el => {
    console.log(el);
})
  1. Create SWC config .swcrc:
{
    "$schema": "https://swc.rs/schema.json",
    "jsc": {
        "parser": {
            "syntax": "ecmascript",
        },
    },
    "env": {
        "targets": {
            "chrome": "40"
        },
        "mode": "usage",
        "coreJs": "3.22"
    }
}
  1. Run: npx swc index.js
  2. Check that forEach polyfill is not in imports

I prepared a comparison of SWC and BABEL playgrounds with the same config (env.mode = "usage"). You can see that BABEL includes a forEach polyfill for this code.

SWC playground: https://play.swc.rs/?version=1.7.24&code=H4sIAAAAAAAAA0vJTy7NTc0r0SssTS2qDE7NSU0uyS9yzMnRUE%2FJLFPX1EvLL3JNTM7QSCvNSy7JzM%2FTSM3RVKjmUgCC5Py84vycVL2c%2FHSQqDVXraY1AL32f8ZQAAAA&config=H4sIAAAAAAAAA1WOzQ6DIBCE7z4F2XPT9C899BGa9CEorhQjYlhoNMZ3ryBYvbHfDDMzFoxBTQIebJyf89FxS2jXeyY0tI73MwEUmpOwqnNwyGpNQap4QxjRtCjQGEOYlcS0alU1bLOF0Z1For0xWHkrG9wnFykdtCl9FNNmN3QY99Ed%2FqZctgaDolf%2B6axfGLbfTRC3El1YA%2BJjjUZ2O0Eeb8pY4olLzFAYi8%2Fovx4v50zfXlaqR0o9YVIx%2FQBKsvGpawEAAA%3D%3D

Babel playground: https://babeljs.io/repl#?browsers=chrome%2040&build=&builtIns=usage&corejs=3.21&spec=false&loose=false&code_lz=CYewxgrgtgpgdgFwHQEcIwE4E8DKMA2MYCIGAgvvgBQDkwAlgG40CUSAZqQKICGYAFlQIACALwA-YQG8AUMPnCwIOAGcQhJPhABzIfhYBuGQF8WQA&debug=false&forceAllTransforms=false&modules=false&shippedProposals=false&evaluate=false&fileSize=false&timeTravel=false&sourceType=script&lineWrap=true&presets=env&prettier=false&targets=&version=7.24.10&externalPlugins=&assumptions=%7B%7D


As you can see, babel adds the necessary import - require("core-js/modules/web.dom-collections.for-each.js"); When testing in chrome 40 (as in env.targets from .swcrc), the browser processes the babel code without errors, but the SWC code produces an error: Uncaught TypeError: undefined is not a function

Input code

document.querySelectorAll('div').forEach(el => {
    console.log(el);
})

Config

{
    "$schema": "https://swc.rs/schema.json",
    "jsc": {
        "parser": {
            "syntax": "ecmascript",
        },
    },
    "env": {
        "targets": {
            "chrome": "40"
        },
        "mode": "usage",
        "coreJs": "3.22"
    }
}

Playground link (or link to the minimal reproduction)

https://play.swc.rs/?version=1.7.24&code=H4sIAAAAAAAAA0vJTy7NTc0r0SssTS2qDE7NSU0uyS9yzMnRUE%2FJLFPX1EvLL3JNTM7QSCvNSy7JzM%2FTSM3RVKjmUgCC5Py84vycVL2c%2FHSQqDVXraY1AL32f8ZQAAAA&config=H4sIAAAAAAAAA1WOzQ6DIBCE7z4F2XPT9C899BGa9CEorhQjYlhoNMZ3ryBYvbHfDDMzFoxBTQIebJyf89FxS2jXeyY0tI73MwEUmpOwqnNwyGpNQap4QxjRtCjQGEOYlcS0alU1bLOF0Z1For0xWHkrG9wnFykdtCl9FNNmN3QY99Ed%2FqZctgaDolf%2B6axfGLbfTRC3El1YA%2BJjjUZ2O0Eeb8pY4olLzFAYi8%2Fovx4v50zfXlaqR0o9YVIx%2FQBKsvGpawEAAA%3D%3D

SWC Info output

Operating System: Platform: linux Arch: x64 Machine Type: x86_64 Version: #41-Ubuntu SMP PREEMPT_DYNAMIC Fri Aug 2 20:41:06 UTC 2024 CPU: (16 cores) Models: Intel(R) Core(TM) i9-10980HK CPU @ 2.40GHz

Binaries: Node: 20.17.0 npm: Yarn: 0.32+git pnpm: N/A

Relevant Packages: @swc/core: 1.7.24 @swc/helpers: N/A @swc/types: 0.1.12

Expected behavior

The forEach polyfill import must be present in the code import "core-js/modules/web.dom-collections.for-each.js"

Actual behavior

Import forEach polyfill is currently not in the code

Version

1.7.24

Additional context

No response

gitrequests avatar Sep 10 '24 11:09 gitrequests

Hi. Is there any progress on this issue? I checked it on the latest version of SWC 1.10.2 - the problem is present there too.


Doesn't anyone have problems with building projects for old browser versions? Or am I not understanding the essence of the problem?

gitrequests avatar Dec 27 '24 10:12 gitrequests

Image

I have the same problem with this config.

console.log([[1, 2], [3, 4]].flat())

const { promise, resolve } = Promise.withResolvers()

setTimeout(() => {
  resolve(true)
}, 5 * 1000)

In chrome68, flat and withResolvers, they were not polyfilled as expected. But entry is fine.

SepVeneto avatar Jan 24 '25 06:01 SepVeneto

It seems SWC doesn't import many polyfills for older browsers.

gitrequests avatar Apr 30 '25 13:04 gitrequests

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

swc-bot avatar Sep 23 '25 12:09 swc-bot