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

Bug Report

Current behavior

• https://babeljs.io/repl#?browsers=defaults%2C ie 11&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 https://github.com/facebook/react/issues/20481#issuecomment-747708453

[akgupta0777]

@eps1lon ohh I got it. Thanks for explaination

[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