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 [email protected] (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

[JaKXz]

For even further in future issue hunters, I started out with microbundle-crl and 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!

[danguilherme]

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"]
}

[rschristian]

@danguilherme You'll have to wait for #988 to be merged unfortunately. Unless you want to patch Microbundle, nothing you can do there.