Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Load jsx-runtime after existing imports #12546

Merged

Conversation

nicolo-ribaudo
Copy link
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
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

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
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)

@nicolo-ribaudo nicolo-ribaudo force-pushed the react-automatic-runtime-import-order branch from f9bef2e to c34234e Compare January 6, 2021 13:03
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