What could be the reason for SVGR not producing a TypeScript declaration file in my esbuild setup?

Question

What could be the reason for SVGR not producing a TypeScript declaration file in my esbuild setup?

I have been working on developing a custom SVG icon library using TypeScript. So far, the SVGR tool has been quite useful in creating components from SVG imports. However, I am encountering an issue with generating types that would allow me to pass attributes like title and ref to the bundled components.

Reproduction

To provide context for my issue, I will share a link to a sample repository along with code snippets. Despite setting up everything as specified, SVGR is successfully creating components but not generating the necessary types. This results in an error whenever I attempt to use an icon from this package.

Repository Link: https://github.com/yuschick/icon-demo

src/index.ts

export { default as TestIcon } from "./svg/test.svg";
export { default as ArrowThinLeft } from './svg/arrow-thin-left.svg';

package.json

{
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
  "type": "module",
  "scripts": {
    "build": "node esbuild.config.js"
  },
  "devDependencies": {
    "esbuild": "^0.14.39",
    "esbuild-plugin-svgr": "^1.0.1",
    "typescript": "^4.6.3"
  }
}

esbuild.config.js

import esbuild from "esbuild";
import svgr from "esbuild-plugin-svgr";

esbuild.build({
    bundle: true,
    entryPoints: ["src/index.ts"],
    external: ["react"],
    format: "esm",
    // minify: true,
    outfile: "dist/index.js",
    plugins: [svgr({ titleProp: true, ref: true, expandProps: false, typescript: true })],
})
  .catch(() => process.exit(1));

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "alwaysStrict": true,
    "baseUrl": "src",
    "checkJs": true,
    "declaration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "outDir": "dist",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "esnext"
  },
  "include": ["src", "global.d.ts"]
}

global.d.ts

declare module '*.svg' {
    const content: string;
    export default content;
}

Expected behavior

I expect by including typescript: true in the svgr options, a index.d.tsx file should be generated based on the component definitions created by SVGR.

According to SVGR documentation:

This feature generates .tsx files with TypeScript typings.

Note: While currently utilizing SVGR with ESBuild, similar difficulties persist when attempting to integrate with Rollup bundler.

typescript svg types .d.ts esbuild

Answer 1

Answer №1

Solving the TypeScript Generation Issue in SVGR

When passing typescript: true in the svgr options, the expectation is to generate a index.d.tsx file based on the components created. However, this expectation is incorrect as SVGR only generates .tsx files with the typescript option enabled, not .d.ts files. This information can be found in the documentation.

Even with the typescript option specified, SVGR will not generate .tsx files when used within an esbuild plugin. The esbuild-plugin-svgr relies on the @svgr/core's transform function, which does not write output files itself but rather transforms SVG to JSX or TSX code. To address this issue, there are two potential solutions:

Option 1: Separate SVGR from esbuild for .d.ts file generation

To generate a .d.ts file, consider using @svgr/cli instead of esbuild-plugin-svgr. Run SVGR before esbuild manually, through script chaining, or utilizing npm's pre-script hook. You may need to explore alternative methods like emitting declaration files with the TypeScript compiler or using plugins like esbuild-plugin-d.ts.

Your updated build chain could involve:

Generating .tsx files from SVGs using @svgr/cli.
Bundling with esbuild.
Generating a .d.ts file separately with tsc or merging it into the previous step with an esbuild plugin.

Option 2: Generating .d.ts from JavaScript bundle

If retaining the current build setup is important, you could create a .d.ts file from the JavaScript bundle using

tsc dist/index.js --declaration --allowJs --emitDeclarationOnly

. Keep in mind that TypeScript might struggle to infer all types accurately, resulting in an incomplete type declaration file.

Answer 2

Solving the TypeScript Generation Issue in SVGR

When passing typescript: true in the svgr options, the expectation is to generate a index.d.tsx file based on the components created. However, this expectation is incorrect as SVGR only generates .tsx files with the typescript option enabled, not .d.ts files. This information can be found in the documentation.

Even with the typescript option specified, SVGR will not generate .tsx files when used within an esbuild plugin. The esbuild-plugin-svgr relies on the @svgr/core's transform function, which does not write output files itself but rather transforms SVG to JSX or TSX code. To address this issue, there are two potential solutions:

Option 1: Separate SVGR from esbuild for .d.ts file generation

To generate a .d.ts file, consider using @svgr/cli instead of esbuild-plugin-svgr. Run SVGR before esbuild manually, through script chaining, or utilizing npm's pre-script hook. You may need to explore alternative methods like emitting declaration files with the TypeScript compiler or using plugins like esbuild-plugin-d.ts.

Your updated build chain could involve:

Generating .tsx files from SVGs using @svgr/cli.
Bundling with esbuild.
Generating a .d.ts file separately with tsc or merging it into the previous step with an esbuild plugin.

Option 2: Generating .d.ts from JavaScript bundle

If retaining the current build setup is important, you could create a .d.ts file from the JavaScript bundle using

tsc dist/index.js --declaration --allowJs --emitDeclarationOnly

. Keep in mind that TypeScript might struggle to infer all types accurately, resulting in an incomplete type declaration file.

Answer 3

Answer №2

Encountered a similar issue with svgr while attempting to package typescript types alongside the rollup-plugin-dts plugin.

Resolved it by creating a unified icon.d.ts file:

import { SVGProps } from 'react';
declare const ReactComponent: (props: SVGProps<SVGSVGElement>) => JSX.Element;
export { ReactComponent };

and then implemented the alias plugin in this manner:

import alias from '@rollup/plugin-alias';
...
      plugins: [
        alias({
          entries: [
            {
              find: /^.*\.svg$/,
              replacement: 'src/types/icon.d.ts',
            },
          ],
        }),
        dts(),
      ],

Answer 4

Encountered a similar issue with svgr while attempting to package typescript types alongside the rollup-plugin-dts plugin.

Resolved it by creating a unified icon.d.ts file:

import { SVGProps } from 'react';
declare const ReactComponent: (props: SVGProps<SVGSVGElement>) => JSX.Element;
export { ReactComponent };

and then implemented the alias plugin in this manner:

import alias from '@rollup/plugin-alias';
...
      plugins: [
        alias({
          entries: [
            {
              find: /^.*\.svg$/,
              replacement: 'src/types/icon.d.ts',
            },
          ],
        }),
        dts(),
      ],

What could be the reason for SVGR not producing a TypeScript declaration file in my esbuild setup?

Reproduction

Expected behavior

Answer №1

Solving the TypeScript Generation Issue in SVGR

Option 1: Separate SVGR from esbuild for .d.ts file generation

Option 2: Generating .d.ts from JavaScript bundle

Answer №2

Similar questions

The initial function that gets executed in the lodash chain is tap()

Dynamically apply classes in Angular using ngClass

Behavior of Shadow DOM role when using the <a> element without an href attribute

Transitioning React components organized in groups to TypeScript

The FullCalendarModule does not have a property named 'registerPlugins' in its type definition

When utilizing the Map.get() method in typescript, it may return undefined, which I am effectively managing in my code

A step-by-step guide on creating a Decorator using the TypeScript compile API

Tips for presenting SVG symbols using Interpolation within Angular 7 from a JSON document

Can you explain the distinction between @types/material-ui and the official @mui/types bundle?

After the transition from Angular 8 to Angular 9, an issue arose with the node_modules/@zerohouse/router-tab/zerohouse-router-tab.d.ts file, as it was not declared

Use a spy to mock a component method using karma and jasmine

Unable to attach to 'leafletOptions' as it is unrecognized as a property of 'div'

What about combining a fat arrow function with a nested decorator?

What could be the reason it's not functioning as expected? Maybe something to do with T extending a Record with symbols mapped

Having trouble with the service connection in Stackblitz?

Improving the structure of a TypeScript switch statement

Guide on showing a component exclusively for iPads with React and TypeScript

Attempting to create a sorting functionality using Vue and Typescript

Utilizing Prisma Enum with Nest JS: A Comprehensive Guide

When bootstrap is imported, SVG is displayed with a square background