react-jsx does not work with Preact

[Klukies]

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]

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]

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

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

[viocha]

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.

Why hasn't this small bug been fixed after so long?

[rschristian]

Why hasn't this small bug been fixed after so long?

Because this is software offered entirely for free and maintained entirely on the back of people donating their free time -- as the commit history shows, not many people have been able/willing to donate time in recent years.

If this is such a key issue for you it should be very quick to fork and correct. Heck, I even wrote up a PR for it already (#988), feel free to copy/paste it into your fork w/ attribution.