Support for the React 17 JSX Transform.

[thebiltheory]

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 JSX Factory

However when I run microbundle-crl --no-compress --format modern, cjs I get the following errors.

rpt2: config error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.

(rpt2 plugin) Error:.../Select/index.ts(1,20): semantic error TS6142: Module './Select' was resolved to '.../Select/Select.tsx', but '--jsx' is not set.
Error: .../Select/index.ts(1,20): semantic error TS6142: Module './Select' was resolved to '.../Select.tsx', but '--jsx' is not set.

I have indeed jsx: "react-jsx" in my tsconfig.js

Is there a quick solution for this?
Thanks

[AnMW]

+1, it would be very nice if I don't have to downgrade my react version again :)

[rschristian]

I don't believe rollup-plugin-typescript2 has been updated for TS 4.1 yet. Likely will have to wait until they support it.

[ezolenko]

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

[rschristian]

Might 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

[rschristian]

@ezolenko Yep, sorry to bring up rpt2. It was #741. Bad guess on my part, apologies.

[developit]

This should be fixed in #741 and also because we've updated to TypeScript 4. It will be released at some point.

[developit]

Also just a note: React 17 supports createElement just fine. There's no need to quickly jump to using jsx-runtime.

[jlengstorf]

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-app and create-next-app, both of which are using react@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

[jlengstorf]

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=jsx

[SWederell]

@jlengstorf what was the package you swapped out? I'm having a very similar issue with one of my projects.

[rschristian]

@bachmannn Yes, the change was released under 0.13.0. I believe it should check node_modules.

[jlengstorf]

@SWederell I hit this with react-query. swapping to swr removed 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 were