react: Fix build with next/webpack + react@<18.0.0 #810
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Build only CommonJS to be compatible with `react@<18.0.0`, and use a wrapper to support ESM.
|
Thank you very much for the excellent, in-depth writeup and fix! I don't think I could figure this out on my own 😆 |
This was referenced Nov 20, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
build only cjs to be compatible with
react@<18.0.0, and use a wrapper to support esm.About this PR
This is going to fix #782 .
What's the problem
In
@giscus/[email protected], next/webpack will resolve@giscus/reactto only./dist/index.cjs.jswhatever you writerequireorimportin your project, which escapes the issue.(
console.logwas added manually for debugging)But in
@giscus/[email protected], with.mjsextension for esmimportconfigured,@giscus/reactwill be resolved to./dist/index.cjswhen usingrequire, and./dist/index.mjswhen usingimport../dist/index.mjsimportsreact/jsx-runtimewhich triggers this issue from react facebook/react#20235 .The workaround
To be compatible with
react@<18.0.0, we should onlyrequirethereact/jsx-runtime(no esmimport) in our build products.To be esm compatible, we can use a wrapper mjs that imports the cjs product. Official approach here https://nodejs.org/api/packages.html#approach-1-use-an-es-module-wrapper
So I wrote a vite plugin to emit the wrapper file.
(
console.logwas added manually for debugging)Thus, everything works fine!
My testing environment
node: 16.18.1
npm: 8.19.2
next: 12.3.3
react: 17.0.2