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

Question

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.

Answer 1

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.