Repository navigation
Support for the React 17 JSX Transform. #763
Description
Activity
+1, it would be very nice if I don't have to downgrade my react version again :)
I don't believe
rollup-plugin-typescript2has been updated for TS 4.1 yet. Likely will have to wait until they support it.Reacted by AnMW, Jason Miller and ZacReacted by Anton GilgurI'm not sure what needs to be updated if anything. I whitelisted
"module": "ES2020"in master branch in case it is needed.Could you set plugin verbosity to 3 and post the output (it will print out parsed tsconfig and versions of related apps)
Reacted by Anton GilgurMight just be #741. Sorry, didn't look too deeply into it, I assumed it was rpt2 but might've just been trying to use the older TS version even with the newer JSX options
This should be fixed in #741 and also because we've updated to TypeScript 4. It will be released at some point.
Reacted by Nabil , Jesper Bromose, Florent SCHILDKNECHT, Anton Gilgur and გიორგი George DavReacted by გიორგი George DavReacted by გიორგი George DavAlso just a note: React 17 supports
createElementjust fine. There's no need to quickly jump to usingjsx-runtime.I'm currently running into this and unclear on what I need to do to get it running. I have a component that uses Context and Hooks that I'm trying to turn into a shared package
when I put the code in the project, everything works as expected. when I move it to a package and build with microbundle, I start getting errors
here are a few combinations I've tried:
# all of these result in the invalid hook call error below microbundle --jsx jsx --jsxImportSource react microbundle --jsx createElement --jsxImportSource react microbundle --jsx React.createElement --jsxImportSource react --globals react=React
microbundle --jsx React.createElement --globals react=React
I am testing this with both
create-react-appandcreate-next-app, both of which are usingreact@17.0.1(same as my package)I feel like I'm missing something small, but I lack the context to know where to start digging
for future Googlers, my issue appears to be somewhere upstream. I swapped a package I was using for another and the issue resolved. I'm now able to build successfully with the following command:
microbundle --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsxReacted by Jason Miller, Tony Alves, Michael Mangialardi, Samuel Chamberland, Chris Zhou, Francisco, Tom, Yoisel Melis, Eka, Fabio Franchino and 5 moreReacted by Kevin Gilbert and Mateo GarciaReacted by Kevin Gilbert and Mateo Garcia@jlengstorf what was the package you swapped out? I'm having a very similar issue with one of my projects.
@bachmannn Yes, the change was released under
0.13.0. I believe it should checknode_modules.@SWederell I hit this with
react-query. swapping toswrremoved the errors and in my case was an easy replacement. from what I could tell, this has to do with the ESM configuration in the packages, though I didn't have time to figure out exactly what the config differences wereFor even further in future issue hunters, I started out with
microbundle-crland eventually switched to:"mb": "microbundle --jsx 'React.createElement' --jsxImportSource react --globals react/jsx-runtime=jsx --format modern,cjs", "build": "yarn run mb", "start": "yarn run mb watch --no-compress",to get everything working w/ React 17 + TS 4.3.5 (all latest at time of writing)
Thanks @jlengstorf!
Reacted by David Mejorado, Jacin Yan, Vishal Sherathiya, Linas Jonas, marcelonallinocj, Imsety, Marcus, Mateo Garcia, Alejandro Tarazona and Nick K.Reacted by Alejandro TarazonaReacted by Yoisel Melis, Vishal Sherathiya, Eric Clemmons, Christopher Caldwell, Zac, Jamie Bowley, Daniel Horvath, Imsety, Marcus, Mateo Garcia and 5 moreReacted by Marcus, Mateo Garcia, heyflynn, გიორგი George Dav, Alejandro Tarazona and Nick K.- added a commit that references this issue
on Aug 11, 2022 I am coming from the future and, after using @JaKXz's solution (thanks for that!), I still have a small issue.
My library is being bundled successfully, but I get error messages for each format:$ microbundle --jsx 'React.createElement' --jsxImportSource react --globals react/jsx-runtime=jsx --format modern,cjs rpt2: options error TS5089: Option 'jsxFactory' cannot be specified when option 'jsx' is 'react-jsx'. rpt2: options error TS5089: Option 'jsxFragmentFactory' cannot be specified when option 'jsx' is 'react-jsx'. rpt2: options error TS5089: Option 'jsxFactory' cannot be specified when option 'jsx' is 'react-jsx'. rpt2: options error TS5089: Option 'jsxFragmentFactory' cannot be specified when option 'jsx' is 'react-jsx'. Build "my-lib" to dist: 152 B: index.cjs.gz 125 B: index.cjs.br 150 B: index.modern.mjs.gz 116 B: index.modern.mjs.br
As I said, testing the built library it works fine. But I'd like to get rid of these messages... Here's my
tsconfig.json, if that helps:{ "compilerOptions": { "outDir": "dist", "module": "ESNext", "target": "ESNext", "lib": ["dom", "ESNext"], "moduleResolution": "node", "jsx": "react-jsx", "sourceMap": true, "declaration": true, "esModuleInterop": true, "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": true, "strictNullChecks": true, "suppressImplicitAnyIndexErrors": true, "noUnusedLocals": true, "noUnusedParameters": true, "allowSyntheticDefaultImports": true }, "include": ["node_modules/microbundle/index.d.ts"] }Reacted by Archimedes Trajano@danguilherme You'll have to wait for #988 to be merged unfortunately. Unless you want to patch Microbundle, nothing you can do there.
Reacted by Guilherme Ventura
I am running into an error which I suspect to be caused by the release of React 17.
@see https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
Typescript 4.1 followed by supporting as well the new
JSXFactoryHowever when I run
microbundle-crl --no-compress --format modern, cjsI get the following errors.I have indeed
jsx: "react-jsx"in mytsconfig.jsIs there a quick solution for this?
Thanks