Ошибка при добавлении контента SVG в скрипт типа

Question

Я перемещаю файл сценария Java в тип сценария и получаю сообщение об ошибке, например Не удается найти имя 'svg'.ts (2304)

Ниже приведен сценарий Javaфайл, который я пытаюсь перенести

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>
);

Нужна помощь в исправлении этого. Ниже приведен файл сценария типа.

Answer 1

Здесь есть две проблемы.

1. Изменение файла в file.tsx приведет к решению "Не удается найти имя 'svg'.ts (2304)". TypeScript документы на JSX
2. Использование модуля CSS в TS требует дополнительной настройки. Как использовать CSS-модули с TypeScript и веб-пакетом

Необходимо изменить tsconfig.json

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

Answer 2

Вы пробовали import * as React from 'react'? возможно, у вас не включен синтетический импорт.

Также, если ваш css находится на том же уровне в иерархии папок, что и ваш компонент, вам потребуется import styles from '.\example.css