Cannot find svg module typescript error in create-react-app

Question

In a create-react-app, I converted a jsx file that was working to a tsx file and this line:

import { ReactComponent as Logo } from "./logo.svg";

is throwing the typescript error: Cannot find module './logo.svg' or its corresponding type declarations.ts(2307)

In tsconfig.json I have:

{
  "include": ["src", "./src/**/*.ts", "./src/**/*.svg"]
}

It looks like node_modules/react-scripts/lib/react-app.d.ts already has:

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

so I am not sure what the issue is.

The SVG has the following as the start of it:

<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><path d="M38.0

Answer 1

I think it needs an explicit reference to the react-scripts library.

I have this file src/react-app-env.d.ts with this line:

/// <reference types="react-scripts" />

This file would have been normally created by Create React App.