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

[laozhu]

First I have a svg file

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
>
  <path d="M17 11h-2V9h2m-4 2h-2V9h2m-4 2H7V9h2m11-7H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z"/>
</svg>

Then I use svgr to import it as react component

export { ReactComponent as Sms } from './icons/sms.svg';

I use vite and vite-plugin-svgr to bundle the icon libraries (success)

> @easynm/[email protected] 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)

> @easynm/[email protected] 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/[email protected]/node_modules/rollup/dist/shared/rollup.js:160:30)
    at Module.error (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:12438:16)
    at Module.getVariableForExportName (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:12603:29)
    at Module.includeAllExports (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:12674:37)
    at Graph.includeStatements (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:23022:36)
    at Graph.build (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:22937:14)
    at async rollupInternal (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:23552:9)
    at async runRollup (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/[email protected][email protected]/node_modules/tsup/dist/rollup.js:8795:20)
    at async startRollup (/Users/Ritchie/Developer/@easynm/cloud/node_modules/.pnpm/[email protected][email protected]/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?

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[thedaviddias]

@laozhu Did you find a solution for this?

[laozhu]

@thedaviddias I ended up writing the type definitions manually.

declare module '@scope-name/icons' {
  type ReactComponent = React.FC<
    React.SVGProps<SVGSVGElement> & {
      title?: string | undefined;
    }
  >;

  const Sms: ReactComponent;
}

[dhikatb]

tsup.config.ts

import svgrPlugin from 'esbuild-plugin-svgr';
import { defineConfig } from 'tsup';

export default defineConfig({
    ...,
    esbuildPlugins: [svgrPlugin({ template })],
});

function template(variables, { tpl }) {
    return tpl`
      ${variables.imports};
      ${variables.interfaces};
      const ${variables.componentName} = (${variables.props}) => (
        ${variables.jsx}
      ); 
      ${variables.exports};
      export const ReactComponent = ${variables.componentName};
    `;
}

it works for me

[richenyadav001]

SVG was compiled successfully, by using

import svgrPlugin from 'esbuild-plugin-svgr';
import { defineConfig } from 'tsup';

export default defineConfig({
    esbuildPlugins: [svgrPlugin()],
});