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

fix(plugin-react): apply manual runtime interop #8546

Merged
merged 3 commits into from Jun 12, 2022

Conversation

bluwy
Copy link
Member

@bluwy bluwy commented Jun 11, 2022

Description

Fix #8468
Fix #5885

Supersedes #7246, though didn't implement deduping react/jsx-runtime and react/jsx-dev-runtime as I think that's a risky optimization.

Additional context

The esbuild+rollup issue arise because the old interop code depends on @rollup/plugin-commonjs to handle the CJS code. Without it, the interop failed, and without interop it caused #8468.

Interop can't be applied with importAnalysisBuild because the JSX code in question is in node_modules, and importAnalysisBuild don't handle both JSX files (es-module-lexer) and those inside node_modules.

This PR implements a virtual proxy file for the react runtime import that implements interop, working with esbuild. (I have not tested without esbuild optimization in build) works

I think the issue at the start would've been better resolved with optimizeDeps.extensions. I'd love to start implementing it for plugin-vue and plugin-react, but there's one more piece I haven't implement in core.

All-in-all, this PR helps prevent the regression at the meantime.


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@bluwy bluwy added p3-minor-bug An edge case that only affects very specific usage (priority) plugin: react labels Jun 11, 2022
@patak-dev
Copy link
Member

Looks good to me. We should check how it works when tge optimizer is disabled and commonjs is used. It should still work though, no? If not we could revert to the prev code in that case

@bluwy
Copy link
Member Author

bluwy commented Jun 12, 2022

Looks like it does work with optimizeDeps.disabled: 'build'! This should be good then. Also refactored virtual handling a bit.

Copy link
Member

@patak-dev patak-dev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for taking care of this @bluwy! Let's merge it and release a new plugin-react alpha so others can test.

I think the issue at the start would've been better resolved with optimizeDeps.extensions. I'd love to start implementing it for plugin-vue and plugin-react, but there's one more piece I haven't implement in core.

Sweet!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
2 participants