typescript에서 svg 파일을 가져올 수 없습니다.

115

에서 typescript(*.tsx)파일 나는이 문을 SVG 파일을 가져올 수 없습니다 :

import logo from './logo.svg';

Transpiler의 말 : [ts] cannot find module './logo.svg'. 내 svg 파일은 <svg>...</svg>.

그러나 .js파일 에서 정확히 동일한 import 문으로 문제없이 가져올 수 있습니다. ts transpiler에 대해 어떻게 든 설정 해야하는 svg 파일 유형과 관련이 있다고 생각합니다.

TS 파일에서이 작업을 수행하는 방법을 공유해 주시겠습니까?

typescript svg

— 앵그리 보이
소스

2

svg 파일은 자바 스크립트가 아니며 자바 스크립트 모듈처럼 사용할 수 없습니다. 대신 http 요청을 사용하여 해당 파일을로드해야합니다.

— toskv

2

Webpack을 사용하고 있습니까? 내가 본 것은 그러한 import진술을 이해하는 유일한 것 입니다. 아마도 Webpack은 JavaScript에서 이것을 허용하지만 TypeScript 파일에서 동일한 마법을 수행하지 않습니다. (나는 타이프 라이터 자체가 여기에 무엇을 알고 있다고 생각하지 않습니다.)

— user94559

1

Webpack을 사용하는 경우 더 많은 도움을 받으려면 Webpack 구성을 공유해야 할 것입니다.

— user94559

2

이것에 대해 조금 더 읽으면 아마도 const logo = require("./logo.svg");오류를 무시하거나 무시할 수 있습니다 . (I는 TS 여전히 올바른 코드를 출력해야한다 생각합니다.)

— user94559

대단히 감사합니다! 좋은 일이 필요합니다! 제 경우에는 const logo = require("./logo.svg") as string;

— AngryBoy

191

웹팩을 사용하는 경우 사용자 정의 유형 파일을 생성하여이를 수행 할 수 있습니다.

다음 내용으로 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

아마도 tsconfig.json 의 include섹션에 추가해야 할 것 입니다.

— Frederik Krautwald

12

감사! 어딘가에 포함되어야한다는 것을 알았지 만 어디에 있는지 이미지를 만들 수 없습니다. tsconfig.json에 있다고 생각했지만 어떻게해야할지 몰랐습니다. 귀하의 의견에 감사드립니다. 검색 결과 다음을 찾았습니다."files": [ "custom.d.ts" ]

— Shil Nevado

5

내용을 입력하여 JSX 구성 요소에 대한 유형 검사를 얻을 수 있습니다.const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;

— RedMatt

그것은 가질 수 있습니다 custom.d.tsSVG가 아닌 다른 디렉토리에있을 수 있도록 전 세계적으로 파일 작업을 custom.d.ts파일? 같은 디렉토리에 있지 않으면 "모듈을 찾을 수 없습니다"라는 오류가 발생합니다.

— Nic Scozzaro

1

이것은 Angular에서 파일의 내용을 가져 오지 않고 파일 이름을 문자열로 가져옵니다. 콘텐츠가 필요합니다. 파일의 내용을 어떻게 얻습니까?

— Routhinator

37

사용을 지적 해 주신 smarx 에게 감사드립니다 require(). 따라서 제 경우에는 다음과 같아야합니다.

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

* .tsx 파일에서 잘 작동합니다.

— 앵그리 보이
소스

5

logo이름이 더 좋을 수 있습니다 logoPath. 왜냐하면 그것이되기 때문입니다.

— DharmaTurtle

2

@DharmaTurtle 나는 그것이 토론 될 수 있다고 생각합니다. 또한 logo질문 에서 호출 되므로이 특정 질문에 대한 더 나은 대답입니다.

— ArneHugo

@DharmaTurtle 솔직히 친구, 변수의 이름은 요점을 크게 벗어났습니다.

— ELI7VH

17

custom.d.ts올바른 유형 ( RedMatt 덕분에)으로 파일을 추가 합니다 (내 src 디렉토리의 루트 경로에 생성했습니다 ).

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

설치 SVG-반응 로더 또는 일부 다른 다음을 :

메인 SVG 로더로 사용
또는 코드베이스를 마이그레이션하고 작업 부분 (JS)을 건드리지 않으려면 가져 오기시 로더를 지정하십시오.

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

그런 다음 JSX 태그로 사용하십시오.

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

— Allenaz
소스

4

내가 찾은 해결책 : ReactJS 프로젝트의 react-app-env.d.ts 파일에서 다음과 같은 주석의 공백을 제거하십시오.

전에

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

후

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

나는 당신을 돕고 싶습니다

— Jilvanx
소스

생성 - 반응 - 응용 프로그램 및 구성 eslint를 사용하는 사람들을 위해,이 문제가 해결 될 수도 있습니다

— 다니엘 친

2

REACT + typescript 자습서를 시도하는 동안 동일한 문제가 발생했습니다.
나를 위해 일한 것은 다음 수입 진술이었습니다.

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 컴포넌트를 만드세요. 나는 require내 imports 와 함께 commonJS 문 을 사용하고 있다는 것이 나를 괴롭 혔기 때문에 이것을했다 .

— endymion1818
소스

0

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

puglin slint를 사용하는 경우 그가 주석이라고 생각하는 것을 비활성화했을 수 있지만 svg를 읽지 않으려면이 유형의 스크립트 모듈이 필요합니다.

— 브레 노 멜로
소스

0

TypeScript와 함께 n 개의 온 코드 애셋 을 사용하려면 이러한 가져 오기 의 유형을 연기해야합니다 . 이를 위해서는 프로젝트의 TypeScript에 대한 사용자 정의 정의를 나타내는 custom.d.ts 파일 이 필요합니다 .

.svg 파일에 대한 선언을 설정해 보겠습니다.

custom.d.ts

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

여기에서 .svg로 끝나는 가져 오기를 지정하고 모듈의 내용을 any로 정의하여 SVG에 대한 새 모듈을 선언합니다.

— 메 하디 하산
소스