Skip to content
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.

Sign up for GitHub

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

Jump to bottom

react-jsx does not work with Preact #857

Open
Klukies opened this issue Jun 17, 2021 · 2 comments · May be fixed by #988
Open

react-jsx does not work with Preact #857

Klukies opened this issue Jun 17, 2021 · 2 comments · May be fixed by #988
Labels
TypeScript

Comments

@Klukies
Copy link

Klukies commented Jun 17, 2021 •
edited
Loading

Hi

Error

I've recently made the switch to microbundle for a project that uses Preact and TypeScript.
Following the docs, and me having the latest version of TypeScript, I put the following in my tsconfig:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    //...
  }
}

However when building with microbundle I get the following error:
rpt2: options error TS5089: Option 'jsxFactory' cannot be specified when option 'jsx' is 'react-jsx'.
This seems weird behaviour as I have not specified the jsxFactory.

Combined with this I also get an error about the 'jsxFragmentFactory' having to be provided to use JSX Fragments, but I presume that is due to the fact the the jsxFactory is somehow incorrect.

I tried hardcoding the values from the config in my script (without success) by doing the following

microbundle --jsx react-jsx --jsxImportSource preact

Possible solution

I've been able to get microbundle working if I switch back to the tsconfig for older versions of TypeScript, so I'll be opting into this behaviour for now. For reference this is what the old config is:

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    //...
  }
}
@rschristian
Copy link
Collaborator

Hmm, we set jsxFactory by default, and I guess rpt2 doesn't realize this needs to be removed if the tsconfig.json sets the jsx key to react-jsx.

microbundle/src/index.js

Lines 518 to 535 in 8108800

tsconfigDefaults: {
compilerOptions: {
sourceMap: options.sourcemap,
declaration: true,
allowJs: true,
emitDeclarationOnly: options.generateTypes && !useTypescript,
declarationDir: getDeclarationDir({ options, pkg }),
jsx: 'preserve',
jsxFactory:
// TypeScript fails to resolve Fragments when jsxFactory
// is set, even when it's the same as the default value.
options.jsx === 'React.createElement'
? undefined
: options.jsx || 'h',
},
files: options.entries,
},
tsconfig: options.tsconfig,

It's likely an upstream issue, but I haven't yet had time to delve into rpt2 yet to double check on that.

Thanks for providing the work around in case anyone else runs into this in the meantime.

@fuunnx
Copy link

fuunnx commented Jul 22, 2021

Another workaround that worked for me (with React 17), is to provide an empty string for jsxFactory and jsxFragmentFactory :

{
    "jsx": "react-jsx",
    "jsxFactory": "",
    "jsxFragmentFactory": ""
}

@rschristian rschristian linked a pull request Aug 10, 2022 that will close this issue
Open
@rschristian rschristian mentioned this issue Jan 23, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
TypeScript
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Strips jsxFactory from tsconfig if --importSource is set developit/microbundle
3 participants
@fuunnx @rschristian @Klukies