Skip to content

Load jsx-runtime after existing imports#12546

Merged
nicolo-ribaudo merged 6 commits intobabel:mainfrom
nicolo-ribaudo:react-automatic-runtime-import-order
Jan 10, 2021
Merged

Load jsx-runtime after existing imports#12546
nicolo-ribaudo merged 6 commits intobabel:mainfrom
nicolo-ribaudo:react-automatic-runtime-import-order

Conversation

@nicolo-ribaudo
Copy link
Copy Markdown
Member

@nicolo-ribaudo nicolo-ribaudo commented Dec 22, 2020

Q                       A
Fixed Issues? Fixes #12522
Patch: Bug Fix? Yes
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass? Yes
Documentation PR Link
Any Dependency Changes?
License MIT

With the classic runtime, it's easy to import polyfills needed by React: you first import the polyfill, and then React itself. However, with the automatic runtime, the react/jsx-runtime import is always injected at the top and thus it's not possible to manually control the imports order.

This PR changes it so that react/jsx-runtime imports always come last: imports are hoisted so it's not a problem if they are injected after the actual usage. However, it's a problem with commonjs since require calls are not hoisted and not always statically analyzable: when using CJS with the automatic runtime, you'll need to load the polyfills in an entry point that doesn't contain JSX code.

This PR adds a new feature to @babel/helper-module-imports, so we might want to release this in a minor version.

cc @babel/react

@nicolo-ribaudo nicolo-ribaudo added PR: Bug Fix 🐛 A type of pull request used for our changelog categories area: react and removed PR: Bug Fix 🐛 A type of pull request used for our changelog categories labels Dec 22, 2020
@babel-bot
Copy link
Copy Markdown
Collaborator

babel-bot commented Dec 22, 2020

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/36813/

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci Bot commented Dec 22, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f59e3ce:

Sandbox Source
babel-repl-custom-plugin Configuration
babel-plugin-multi-config Configuration

@nicolo-ribaudo
Copy link
Copy Markdown
Member Author

nicolo-ribaudo commented Dec 22, 2020

Thanks @babel-bot 😄 I don't have a windows pc to regenerate those fixtures and your help is welcome! (ref)

Comment thread packages/babel-runtime-corejs2/package.json Outdated
Comment thread packages/babel-helper-module-imports/src/import-injector.js Outdated
@nicolo-ribaudo nicolo-ribaudo force-pushed the react-automatic-runtime-import-order branch from f9bef2e to c34234e Compare January 6, 2021 13:03
Comment thread packages/babel-helper-module-imports/src/import-injector.js Outdated
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area: react outdated A closed issue/PR that is archived due to age. Recommended to make a new issue PR: Bug Fix 🐛 A type of pull request used for our changelog categories

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

4 participants