@babel/plugin-transform-react-jsx: automatic runtime import is added at the start

[eps1lon]

Bug Report

Current behavior

• https://babeljs.io/repl#?browsers=defaults%2C%20ie%2011&build=&builtIns=false&spec=true&loose=true&code_lz=JYWwDg9gTgLgBAcigUwIYGMYFpVjFyAGwE8AzYQwgemGQEY6EBuAKFElkRQ213yLIVqAZxioARoWTM24aPABKaTABEA8gFk4pKBBBdl2ACZ6ZLJT3UaAdCgB2R5FAAULOO7gAeMAD4AEsiUEAA0cADq0IRGAISeVL7Bbh4m6ACuIMh2MNYA5sgwAKJSGVkAQsQAkkbOSBAQMAgAlCyNTEA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact&prettier=false&targets=&version=7.12.11&externalPlugins=

Input Code

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <p>Hello, World!</p>,
    document.getElementById('root')
);

Expected behavior

The runtime is not evaluated before the polyfills are applied.

The polyfills contain a polyfill for symbols. However, React uses numbers as fallbacks for its "symbols". Since react and its renderer packages don't share the same symbols but rely on Symbol.for the symbols in the created react elements will use numbers while the renderer expects Symbols

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

See repl

Environment

• Babel version(s): See repl
• Node/npm version: See repl
• OS: See repl
• Monorepo: See repl
• How you are using Babel: See repl

Possible Solution

Add the import after all the existing imports.

Additional context

Originally reported in facebook/react#20481 (comment)

[babel-bot]

Hey @eps1lon! 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."

[nicolo-ribaudo]

Maybe just injecting it at the end of the file would be enough?

[eps1lon]

Maybe just injecting it at the end of the file would be enough?

That's what I thought as well though it would probably a bit harder to find the right injections point in a non-ESM world. Thanks for the quick response!

[nicolo-ribaudo]

In a non-ESM world, we can keep the current behavior. The workaround is really easy: import the polyfills in new entrypoint that only loads

• The polyfills
• The actual entrypoint

[eps1lon]

The workaround is really easy

Sure, but you're just adding entrypoints upon entrypoints for a really obscure bug. The input code is directly take from the CRA docs: https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill#react-app-polyfill

[nicolo-ribaudo]

All those examples use ES modules, the only problem is when using JSX inside CommonJS files.

EDIT: Ok, I was really bad at explaining myself 😅
We can fix this for ESM, and keep the current behavior for CJS

[akgupta0777]

In the REPL code it is missing one important line

import React from "react";

without it Hello world will not render.

[eps1lon]

In the REPL code it is missing one important line

import React from "react";

The REPL code is only valid if you use runtime: 'automatic' which takes care of injecting the runtime. In fact, the automatic injecting is at the center of this issue.

[akgupta0777]

@eps1lon ohh I got it. Thanks for explaination