Automatically inject the JSX runtime

[mquandalle]

I recently migrated a React package to tsup and encountered the issue React is not defined

The solution is to specify a JSX runtime which is possible since the introduction of the --inject option in #390. But it still require creating a react-shim.js file.

Inferring the correct runtime from tsconfig would greatly improve the developer experience.

[gyfchong]

Also ran into this problem. It's very confusing for the bundler to not recognise the jsx runtime in tsconfig.

[lunacrafts]

This configuration seems to work for me (at this moment at last). Would be great to put it somewhere in docs. It was very time consuming to make it work.

// tsup.config.js
import { defineConfig } from 'tsup';
export default defineConfig((options) => {
  return {
    entry: ["./src/index.ts"],
    format: ["esm", "cjs"],
    external: ['react', 'react-dom'],
    dts: false,
    sourcemap: false,
    splitting: true,
    metafile: true,
    inject: ['./react-shim.js'],
    onSuccess: "tsc --emitDeclarationOnly --declaration",
    minify: !options.watch
  }
});

// package.json
{
  "name": "library-name",
  "version": "0.0.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    }
  },
  "files": [
    "dist/**"
  ],
  "scripts": {
    "dev": "tsup --watch",
    "build": "tsup"
  },
}

[jlarmstrongiv]

Was this fixed in #715 (comment) ?