Невозможно импортировать файлы SVG в машинописный текст

115

В typescript(*.tsx)файлах я не могу импортировать файл svg с этим утверждением:

import logo from './logo.svg';

Transpiler говорит: [ts] cannot find module './logo.svg'. Мой файл svg просто <svg>...</svg>.

Но в .jsфайле я могу импортировать его без каких-либо проблем с точно таким же оператором импорта. Я полагаю, это как-то связано с типом файла svg, который должен быть каким-то образом установлен для транспилятора ts.

Не могли бы вы поделиться, как заставить это работать в файлах ts?

typescript svg

— AngryBoy
источник

2

Файлы svg не являются javascript и не могут использоваться в качестве модулей javascript. Вместо этого вы должны загружать эти файлы с помощью HTTP-запроса.

— toskv

2

Вы используете Webpack? Это единственное, что я видел, понимая такое importутверждение. Возможно, Webpack - это то, что позволяет это в вашем JavaScript, но он не делает того же волшебства в файлах TypeScript. (Я не думаю, что сам TypeScript знает, что здесь делать.)

— user94559

1

Если вы используете Webpack, вам, вероятно, потребуется поделиться своей конфигурацией Webpack, чтобы получить дополнительную помощь.

— user94559

2

Прочитав немного больше об этом, вы, вероятно, сможете const logo = require("./logo.svg");исправить ошибку или просто проигнорировать ее. (Я считаю, что TS по-прежнему должен выводить правильный код.)

— user94559

Большое спасибо! требует хороших работ! В моем случае это должно быть const logo = require("./logo.svg") as string;

— AngryBoy

191

Если вы используете webpack, вы можете сделать это, создав файл пользовательских типов.

Создайте файл с именем custom.d.ts со следующим содержимым:

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

Добавьте custom.d.tsк tsconfig.jsonниже

"include": ["src/components", "src/custom.d.ts"]

Источник: https://webpack.js.org/guides/typescript/#importing-other-assets

— Грэм
источник

36

Вероятно, вам нужно будет добавить его в includeраздел в tsconfig.json .

— Фредерик Краутвальд

12

Спасибо! Я знал, что это должно быть где-то включено, но не могу представить, где. Даже я думал, что это находится в tsconfig.json, но я не знал, как это сделать. Спасибо за ваш комментарий. Я провел поиск и нашел:"files": [ "custom.d.ts" ]

— Шил Невадо

5

Вы можете выполнить проверку типов для компонента JSX, набрав содержимое:const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;

— RedMatt,

Возможно ли, чтобы custom.d.tsфайл работал глобально, чтобы SVG находился в другом каталоге, чем custom.d.tsфайл? Я получаю сообщение об ошибке «не могу найти модуль», если он не находится в том же каталоге.

— Nic Scozzaro 03

1

Это не импортирует содержимое файла в Angular, а импортирует имя файла в виде строки. Мне нужен контент. Как нам получить содержимое файла?

— Routhinator

37

Спасибо smarx за указание на использование require(). Так что в моем случае это должно быть:

const logo = require("./logo.svg") as string;

который отлично работает в файлах * .tsx

— AngryBoy
источник

5

logoможно было бы лучше назвать logoPath, потому что это то, чем оно становится.

— DharmaTurtle

2

@DharmaTurtle Я думаю, это можно обсуждать. Кроме того, logoон вызывается в вопросе, так что это лучший ответ на этот конкретный вопрос как таковой.

— ArneHugo,

@DharmaTurtle, честно говоря, чувак, имя переменной не имеет значения, зачем отвлекаться на такую тривиальную вещь?

— ELI7VH,

17

Добавьте custom.d.tsфайл (я создал его по корневому пути моего каталога src) с правильным типом (спасибо RedMatt ):

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

Установите svg-react-loader или другой , затем:

Используйте его как основной загрузчик svg
Или, если вы переносите кодовую базу и не хотите касаться рабочей части (JS), укажите загрузчик при импорте:

import MySVG from '-!svg-react-loader!src/assets/images/name.svg'

Затем просто используйте его как тег JSX:

function f() { 
  return (<MySVG />); 
}

— Алленаз
источник

4

Решение, которое я нашел: в проекте ReactJS в файле response-app-env.d.ts вы просто удаляете пробел в комментарии, например:

Перед

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

После

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

Я надеюсь помочь тебе

— Jilvanx
источник

Для людей, которые используют приложение create-response-app и настроили eslint, это может решить проблему

— Дэниел Чин,

2

У меня была такая же проблема, когда я пробовал использовать рукописный текст REACT +.
Для меня сработал следующий оператор импорта.

import * as logo from 'logo.svg'

Вот мои зависимости в package.json.

  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-ts": "3.1.0"
  },

Надеюсь, это кому-то поможет.

— Киран Мохан
источник

0

Есть альтернативный способ сделать это, который мы реализовали: создать компоненты SVG. Я сделал это, потому что меня беспокоило, что я использую commonJS requireвместе с моими imports.

— эндимион1818
источник

0

    // eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

если вы используете puglin slint, возможно, он отключил, думая, что это был комментарий, но не для чтения svg, вам нужен модуль сценария этого типа, просто отключите строку и будьте счастливы

— Брено Мело
источник

0

Чтобы использовать n ресурсов в коде с TypeScript , нам нужно отложить тип для этого импорта . Для этого требуется файл custom.d.ts, который обозначает пользовательские определения для TypeScript в нашем проекте.

Давайте настроим объявление для файлов .svg:

custom.d.ts

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

Здесь мы объявляем новый модуль для SVG, указывая любой импорт, заканчивающийся на .svg, и определяя содержимое модуля как любое.

— Мехади Хасан
источник