egoist / egoist/tsup

React is not defined / JSX runtime not automatically injected

Open
#792 6 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
11.3k
Forks
275
PR merge metrics
No merged PRs in 30d

Description

I wanted to switch from SWC to TSup to reduce the complexity of my configuration.

From what I've read in [ESbuild documentation](https://esbuild.github.io/content-types/#auto-import-for-jsx) and [TSup changelog](https://github.com/egoist/tsup/releases/tag/v6.2.2), I expected TSup to automatically pickup my JSX config from `tsconfig.json` settings.

However, when I tried to install TSup, I got the error `React is not defined` (see the configuration below).
Besides, when I look at the generated file, I notice that `React.createElement` is used while `React` is never defined.

Capture d’écran 2022-12-04 à 23 54 08

Configuration:

```typescript
// tsconfig.json
{
"extends": "tsconfig-base",
"compilerOptions": {
"incremental": false,
"baseUrl": ".",
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react",
"lib": ["ES2017", "DOM"],
},
"include": ["src", "global.d.ts"],
"exclude": ["node_modules", "dist"]
}

// tsup.config.js
import { defineConfig } from 'tsup';
import path from 'path';

export default defineConfig({
tsconfig: path.resolve(__dirname, './tsconfig.json'),
entry: ['src/index.ts'],
format: ['cjs', 'esm'],
clean: true,
external: ['react', 'react-dom', '@emotion/react', '@emotion/styled'],
});

// package.json
{
"name": "my-package",
"dependencies": {
"react": "^18.2.0",
// ...others deps
},
"devDependencies": {
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"tsup": "6.5.0",
"typescript": "^4.9.3",
// ...others deps
},
"peerDependencies": {
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
// ...others deps
}
}

```

Related issues:
- https://github.com/egoist/tsup/issues/715
- https://github.com/egoist/tsup/issues/558

PS: I succeeded to make it work by injecting React as mentioned in the related issues but the solution is not

```typescript
// tsup.config.js
export default defineConfig({
// other props
inject: [path.resolve(__dirname, './react-shim.js')],
});

// react-shim.js
import React from 'react';
export { React };
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.