React is not defined / JSX runtime not automatically injected
I wanted to switch from SWC to TSup to reduce the complexity of my configuration.
From what I've read in ESbuild documentation and TSup changelog, 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.
Configuration:
// 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:
PS: I succeeded to make it work by injecting React as mentioned in the related issues but the solution is not
// tsup.config.js
export default defineConfig({
// other props
inject: [path.resolve(__dirname, './react-shim.js')],
});
// react-shim.js
import React from 'react';
export { React };
How does funding with Polar work?
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too