Type 'FunctionComponent<SVGAttributes<SVGElement>>' is not assignable to type 'string'.ts

Question

I am getting below error when I converted my js based react app into typescript.

Type 'FunctionComponent<SVGAttributes<SVGElement>>' is not assignable to type 'string'.ts(2322)
index.d.ts(2188, 9): The expected type comes from property 'src' which is declared here on type 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>'

Below is my App.tsx file

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Here the src attribute of image tag shows this compile error

No idea how to resolve this

My react version is 9.1.2

I tried creating a react app with template specified as typescript, the same code works fine and I copied that tsx file contents into my react app, it shows the same error.

npx create-react-app myapp --template typescript

The same content on that app works without any problem. I coped the tsconfig.json as well into my main project. That doesn't helped in anyway.

Answer 1

Change your content from

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

to

declare module "*.svg" {
    const content: any;
    export default content;
}