Getting error while adding SVG content in type script

user_3363694 0
Viewed 410

I am migrating java script file to type script and getting error like Cannot find name 'svg'.ts(2304)

Below is the Java script file i am trying to migrate

import React from 'react';
import styles from 'example.css';

export default () => (
    <svg viewBox="0,0,48,44" focusable="false">
        <path className={styles.Fill} d="M0,0h480z" />
        <path
            className={styles.Grey}
            d="M31.9,1.5,4.5-4.5
        s.3z"
        />
    </svg>
);

Looking for help in fixing this. Below is the type script file. enter image description here

enter image description here

enter image description here

react-redux typescript javascript
2 Answers

There are two problems here.

  1. Modifying the file to file.tsx will resolve "Cannot find name 'svg'.ts(2304)". TypeScript docs on JSX
  2. Using css module in ts requires some extra configuration. How to use CSS Modules with TypeScript and webpack

Need to modify tsconfig.json

{
     "compilerOptions": {
         ...
         "jsx": "react",
         ...
     }
}
user_60212800

Have you tried import * as React from 'react'? you may not have synthetic imports enabled.

Also if your css is at the same level in the folder hierarchy as your component you will need to import styles from '.\example.css

user_18014030
Related