Can't use tsup to generate `.d.ts` files with svgr
- Dominant language
- TypeScript
- Stars
- 11.3k
- Forks
- 275
- PR merge metrics
- No merged PRs in 30d
Description
**First I have a svg file**
```svg
```
**Then I use svgr to import it as react component**
```tsx
export { ReactComponent as Sms } from './icons/sms.svg';
```
**I use vite and [vite-plugin-svgr](https://github.com/pd4d10/vite-plugin-svgr) to bundle the icon libraries (success)**
```console
> @easynm/icons@1.0.0 build-lib /Users/Ritchie/Developer/@easynm/cloud/components/icons
> cross-env LIBRARY=1 vite build
vite v2.8.3 building for production...
✓ 2 modules transformed.
dist/icons.es.js 1.08 KiB / gzip: 0.53 KiB
dist/icons.es.js.map 0.56 KiB
dist/icons.umd.js 1.25 KiB / gzip: 0.68 KiB
dist/icons.umd.js.map 0.51 KiB
```
**Try to generate .d.ts files with below cli (failed)**
```console
> @easynm/icons@1.0.0 build-dts /Users/Ritchie/Developer/@easynm/cloud/components/icons
> tsup src/index.ts --dts-only -d dist
CLI Building entry: src/index.ts
CLI Using tsconfig: tsconfig.json
CLI tsup v5.11.13
DTS Build start
DTS Build error
Error: 'ReactComponent' is not exported by src/icons/sms.svg, imported by src/index.ts
at error (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/rollup@2.67.2/node_modules/rollup/dist/shared/rollup.js:160:30)
at Module.error (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/rollup@2.67.2/node_modules/rollup/dist/shared/rollup.js:12438:16)
at Module.getVariableForExportName (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/rollup@2.67.2/node_modules/rollup/dist/shared/rollup.js:12603:29)
at Module.includeAllExports (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/rollup@2.67.2/node_modules/rollup/dist/shared/rollup.js:12674:37)
at Graph.includeStatements (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/rollup@2.67.2/node_modules/rollup/dist/shared/rollup.js:23022:36)
at Graph.build (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/rollup@2.67.2/node_modules/rollup/dist/shared/rollup.js:22937:14)
at async rollupInternal (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/rollup@2.67.2/node_modules/rollup/dist/shared/rollup.js:23552:9)
at async runRollup (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/tsup@5.11.13_typescript@4.5.5/node_modules/tsup/dist/rollup.js:8795:20)
at async startRollup (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/tsup@5.11.13_typescript@4.5.5/node_modules/tsup/dist/rollup.js:8833:5)
ELIFECYCLE Command failed with exit code 1.
```
If I want to use tsup for dts only, can I have a method to avoid this error?
Contributor guide
Research direction
Reproduce the failure from src/index.ts using the src/icons/sms.svg re-export and the tsconfig.json configuration, then inspect tsup's dts-only path and its handling of the SVG export. The work is done when the documented command generates declaration files without the reported ReactComponent export error while preserving the existing Vite build.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100