How to add polyfill for array.at

[buondevid]

Hi, we have this babel.config.js file and we can't understand how to add only the array.at polyfill to the polyfills our config already add.

Basically it doesn't get automatically added because our targets all support it, but we still would like to add it singularly.

Thanks

/* eslint-disable @typescript-eslint/no-var-requires */
// Ref: https://github.com/facebook/create-react-app/tree/master/packages/babel-preset-react-app

const { devDependencies } = require('./package.json');
const { browserslist } = require('../../package.json');

module.exports = (api) => {
  api.cache(true);

  const env = process.env.BABEL_ENV || process.env.NODE_ENV || 'production';
  const isEnvProduction = env === 'production';
  const isEnvDevelopment = env === 'development';
  const isEnvTest = env === 'test';

  return {
    targets: browserslist.join(', '),
    presets: [
      (isEnvProduction || isEnvDevelopment) && [
        '@babel/preset-env',
        {
          useBuiltIns: false,
          targets: browserslist.join(', '),
        },
      ],
      isEnvTest && [
        // ES features necessary for user's Node version
        '@babel/preset-env',
        {
          targets: {
            node: 'current',
          },
        },
      ],
      [
        '@babel/preset-react',
        {
          // Adds component stack to warning messages
          // Adds __self attribute to JSX which React will use for some warnings
          development: isEnvDevelopment || isEnvTest,
          // Will use the native built-in instead of trying to polyfill
          // behavior for any plugins that require one.
          useBuiltIns: true,
        },
      ],
      '@babel/preset-typescript',
    ].filter(Boolean),
    plugins: [
      // Optional chaining and nullish coalescing are supported in @babel/preset-env,
      // but not yet supported in webpack due to support missing from acorn.
      // These can be removed once webpack has support.
      // See https://github.com/facebook/create-react-app/issues/8445#issuecomment-588512250
      '@babel/plugin-proposal-optional-chaining',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      '@babel/plugin-proposal-class-properties',
      'babel-plugin-styled-components',
      [
        '@babel/plugin-transform-runtime',
        { corejs: 3, absoluteRuntime: true, helpers: true, version: devDependencies['@babel/runtime-corejs3'] },
      ],
      isEnvProduction && 'transform-react-remove-prop-types',
      isEnvProduction && ['transform-remove-console', { exclude: ['error', 'warn'] }],
    ].filter(Boolean),
  };
};

[liuxingbaoyu]

https://babeljs.io/docs/babel-preset-env#include
Did this help you?

[buondevid]

I saw that but when I do include: ['es.array.at'] I get a build compile error saying that the module (es.array.at) can't be found.

[liuxingbaoyu]

      [
        '@babel/plugin-transform-runtime',
        { corejs: 3/* here */, absoluteRuntime: true, helpers: true, version: devDependencies['@babel/runtime-corejs3'] },
      ],

Can you try #15412 (comment)? Since it was added in v3.17.