CODEWITHSUNDEEP
typescriptsvgcreate-react-app.d.ts
ngtrthinh
ngtrthinh

Reputation: 166

Cannot find module svg with typescript on create-react-app even with custom.d.ts

There's a lot of almost similar questions but I still can't find anything that works.

For context: I'm using CRA app with js template and migrated to ts after. The SVG is working ok, so it's likely to bea problem of types.

This is my tsconfig.json:

{
  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react-jsx",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "paths": { "#*": ["./*"] }
  },
}

My custom.d.ts (placed at src):

import React from "react";

declare module "*.svg" {
  export const ReactComponent: React.FunctionComponent<
    React.SVGAttributes<SVGElement>
  >;
  const src: string;
  export default src;
}

My SVG usage:

import { ReactComponent as AddLineIcon } from "../../../assets/images/icons/add-line.svg";

I've checked the path and intellisense also confirmed that the svg file is there. I've tried adding the custom.d.ts to tsconfig.json at "include" and "files". I've tried to reload my editor/TS server but no lucks. Appreciate any helps or suggestions.

Upvotes: 0

Views: 322

Answers (1)

ngtrthinh
ngtrthinh

Reputation: 166

For whoever needed something similar, after a long search I found that the line import React from "react"; is the problem, since I'm using React >17 and it has JSX transform. Seems strange but my best choice is to disable eslint with /* eslint-disable no-undef */ on custom.d.ts. Might have to raise an issue to React (or Eslint/Typescript) but I'm not sure which one and what I should ask for, so I'll have to accept this ugly solution for the time being.

Still if anyone has other suggestions or updates, I'll be more than happy to try.

Upvotes: 0

Related Questions