egoist / egoist/tsup

Can't use tsup to generate `.d.ts` files with svgr

Open
#570 4 comments 7 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.