[Bug]: Some of the proposed methods do not seem to have been realised

[limingcan562]

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

I used two methods that are currently in stage-1

[1, 2, 3, 4, 5].filterReject(it => it % 2); // => [2, 4]


[1, 2, 3].lastItem;  // => 3
[1, 2, 3].lastIndex; // => 2

Configuration file name

babel.config.js

Configuration

const presets = [
    '@babel/preset-env'
];

const plugins = [
    [
        '@babel/plugin-transform-runtime',
        {
            corejs: {
                version: 3,
                proposals: true
            }
        }
    ]
];

module.exports = {plugins, presets};

Current and expected behavior

Babel compiles and outputs the following result:

"use strict";

[1, 2, 3, 4, 5].filterReject(function (it) {
  return it % 2;
}); // => [2, 4]

[1, 2, 3].lastItem; // => 3
[1, 2, 3].lastIndex; // => 2

It does not appear to introduce the relevant polyfill to implement

Environment

System:
OS: Windows 10 10.0.18363
Binaries:
Node: 14.16.1 - D:\nodejs\node.EXE
Yarn: 1.19.1 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.12 - D:\nodejs\npm.CMD
npmPackages:
@babel/cli: ^7.20.7 => 7.20.7
@babel/core: ^7.20.12 => 7.20.12
@babel/plugin-transform-runtime: ^7.19.6 => 7.19.6
@babel/preset-env: ^7.20.2 => 7.20.2
@babel/runtime-corejs2: ^7.20.13 => 7.20.13
@babel/runtime-corejs3: ^7.20.13 => 7.20.13
babel-loader: ^9.1.2 => 9.1.2
webpack: ^5.75.0 => 5.75.0

Possible solution

No response

Additional context

No response

[babel-bot]

Hey @limingcan562! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[JLHwung]

To fix this issue the transform-runtime should support string corejs option, like we did for preset-env.

As a workaround, you can replace transform-runtime by babel-plugin-polyfill-corejs3, which has already been used by transform-runtime under the hood:

const plugins = [
    [
        'babel-plugin-polyfill-corejs3',
        {
          // provide the exact `core-js` version you are using
          version: "3.27",
          proposals: true
        }
    ]
];

[limingcan562]

I have tried it and it is basically fine.

I looked at the babel-polyfills and some examples, but found that there was only the method configuration, not versionand proposals.

Are there any other configuration items in babel-plugin-polyfill-corejs3?
Or is there documentation for babel-plugin-polyfill-corejs3?

[limingcan562]

To fix this issue the transform-runtime should support string corejs option, like we did for preset-env.

As a workaround, you can replace transform-runtime by babel-plugin-polyfill-corejs3, which has already been used by transform-runtime under the hood

Hello, I'm sorry to bother you again. I am currently delving deeper into Babel (as it is a great tool) and based on the above answers. So I have the following questions and I hope to receive your answers:

1. Can I directly use the babel-plugin-polyfill-corejs3 configuration method instead of the @babel/preset-env or @babel/plugin-transform-runtime configuration method to inject different polyfills?
2. Is there a full documentation for babel-plugin-polyfill-corejs3?

• Because the usage of the example provided by babel-polyfills is not quite the same as the documentation for babel-plugin-polyfill-corejs3.
• Also, I think a lot of people have the same confusion as I do. I don't know how many configuration items there are for babel-plugin-polyfill-corejs3.
  I looked at some historical issues and found that babel-plugin-polyfill-corejs3 still has a lot of configuration items, so I'm confused about some of the uses of babel-plugin-polyfill-corejs3.

Looking forward to your reply, appreciate it! 🙏🏻

[JLHwung]

Can I directly use the babel-plugin-polyfill-corejs3 configuration method instead of the @babel/preset-env or @babel/plugin-transform-runtime configuration method to inject different polyfills?

Yes, in fact @babel/preset-env is using babel-plugin-polyfill-corejs3, too:

babel/packages/babel-preset-env/src/index.ts

Line 219 in 0f492e4

[pluginCoreJS3, pluginOptions],

the usage of the example provided by babel-polyfills is not quite the same as the documentation for babel-plugin-polyfill-corejs3.

The document of babel-plugin-polyfill-corejs3 consists of two sections. The first section

See here for a list of options supported by every polyfill provider.

provides a link to options supported by every polyfill provider, including babel-plugin-polyfill-corejs3.

The second sections includes options that are only supported in babel-plugin-polyfill-corejs3, namely version and proposals. In other words, babel-plugin-polyfill-corejs3 supports options listed in https://github.com/babel/babel-polyfills/blob/main/docs/usage.md#options, as well as version and proposals.

If you have any questions on docs, feel free to open a PR at https://github.com/babel/babel-polyfills.

[limingcan562]

Thank you for your answer! This has given me a deeper understanding of babel-plugin-polyfill-corejs3!

I think babel-plugin-polyfill-corejs3 is very useful, but the official documentation doesn't seem to promote it much. Why is this?

Or will it be promoted during Babel8?