에서 typescript(*.tsx)파일 나는이 문을 SVG 파일을 가져올 수 없습니다 :
import logo from './logo.svg';Transpiler의 말 : [ts] cannot find module './logo.svg'.
내 svg 파일은 <svg>...</svg>.
그러나 .js파일 에서 정확히 동일한 import 문으로 문제없이 가져올 수 있습니다. ts transpiler에 대해 어떻게 든 설정 해야하는 svg 파일 유형과 관련이 있다고 생각합니다.
TS 파일에서이 작업을 수행하는 방법을 공유해 주시겠습니까?
답변
웹팩을 사용하는 경우 사용자 정의 유형 파일을 생성하여이를 수행 할 수 있습니다.
다음 내용으로 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
답변
사용을 지적 해 주신 smarx 에게 감사드립니다 require(). 따라서 제 경우에는 다음과 같아야합니다.
const logo = require("./logo.svg") as string;* .tsx 파일에서 잘 작동합니다.
답변
custom.d.ts올바른 유형 ( RedMatt 덕분에)으로 파일을 추가 합니다 (내 src 디렉토리의 루트 경로에 생성했습니다 ).
declare module '*.svg' {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}- 메인 SVG 로더로 사용
- 또는 코드베이스를 마이그레이션하고 작업 부분 (JS)을 건드리지 않으려면 가져 오기시 로더를 지정하십시오.
import MySVG from '-!svg-react-loader!src/assets/images/name.svg'그런 다음 JSX 태그로 사용하십시오.
function f() {
return (<MySVG />);
}답변
내가 찾은 해결책 : ReactJS 프로젝트의 react-app-env.d.ts 파일에서 다음과 같은 주석의 공백을 제거하십시오.
전에
// / <reference types="react-scripts" />후
/// <reference types="react-scripts" />나는 당신을 돕고 싶습니다
답변
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"
},누군가에게 도움이되기를 바랍니다.
답변
우리가 구현 한 다른 방법이 있습니다 : SVG 컴포넌트를 만드세요. 나는 require내 imports 와 함께 commonJS 문 을 사용하고 있다는 것이 나를 괴롭 혔기 때문에 이것을했다 .
답변
// eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />puglin slint를 사용하는 경우 그가 주석이라고 생각하는 것을 비활성화했을 수 있지만 svg를 읽지 않으려면이 유형의 스크립트 모듈이 필요합니다.
