-
Notifications
You must be signed in to change notification settings - Fork 12.6k
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
[TS 4.1] react-jsx breaks a type:module package #41623
Comments
For others utility, this is my fix at the moment: # fix-build.sh
for dir; do
find "$dir" -type f -iname '*.js' -not -ipath '*/node_modules/*' -print0 \
| while read -r -d '' file; do
sed -i '' -E 's|(import *.+from *['\''"]react/jsx-runtime)(['\''"])|\1.js\2|g' "$file"
done
done Quite ugly. 😢 |
Nope! The current behavior is expected - You're using a version of a runtime (well, webpack) that doesn't (fully?) support |
Thank you very much @weswigham for the extensive explanation. I understand the point, but using the exports map seams like a last resort and of course it is an implementation detail of the consumed package on which the consumer has no control. Technically speaking, a configuration flag/option should configure something. If for some reasons it is not possible to exploit the already present
It does not break anything, it works with "legacy" packages without an export map and does not need a runtime able to remap the imports. |
Reposting from the issue on the Babel side: soon React will only support the version without the extension: https://github.com/facebook/react/pull/20304/files#diff-1f344ac391eeecc21ec0f01fb07430a47f4b80d20485c125447d54c33c4bbfc4R34-R35 |
I'm trying to transpile React 17.0.2 with TypeScript configured to use "module": "ES6" (rather than "CommonJS"). To get the output to run in Node, for now seems you have to manually update node_modules/react/package.json and add this configuration, reproduced here: "exports": {
".": "./index.js",
"./jsx-dev-runtime": "./jsx-dev-runtime.js",
"./jsx-runtime": "./jsx-runtime.js",
"./": "./"
}, |
It will be fixed in React 17.0.3. |
I think it's incorrect for typescript to be emitting CJS code when tsconfig.json instructs it to emit ES modules compatible code. It can be solved in bundlers with various configuration options, but it creates problems in various server-side rendering usecases. I needed the following hack while invoking node: # Affects all imports, so not ideal.
node --experimental-specifier-resolution=node yourscript.js When I look at the corresponding babel thread, it seems they did the right thing initially and then reverted because it broke preact. IMHO typescript should emit clean output, or at least make it configurable. Right now, it looks like there is no way to get clean ES modules compatible output while using tsx. |
TypeScript Version: 4.1.2 AND next
Search Terms: jsx react-jsx jsxImportSource react/jsx-runtime extension
When using the new
jsx: react-jsx
flag, the emitted files should point toreact/jsx-runtime.js
instead ofreact/jsx-runtime
. Otherwise Webpack fails.Code
Expected behavior:
The output of the build should be
The react/jsx-runtime should have the .js extension.
Actual behavior:
The output of the build is
The react/jsx-runtime has no extension. Which breaks Webpack 5 (5.6).
For reference:
facebook/react#20235
babel/babel#12210
The text was updated successfully, but these errors were encountered: