Không thể nhập các tệp svg trong bảng chữ

Trong typescript(*.tsx)các tệp, tôi không thể nhập tệp svg với câu lệnh này:

import logo from './logo.svg';

Transpiler nói: [ts] cannot find module './logo.svg'. Tập tin svg của tôi chỉ là <svg>...</svg>.

Nhưng trong .jstệp, tôi có thể nhập nó mà không gặp bất kỳ vấn đề nào với cùng một câu lệnh nhập. Tôi cho rằng nó có liên quan đến loại tệp svg phải được đặt bằng cách nào đó cho trình chuyển đổi ts.

Bạn có thể vui lòng chia sẻ làm thế nào để làm cho điều này hoạt động trong tệp ts?

Nếu sử dụng webpack, bạn có thể thực hiện việc này bằng cách tạo tệp loại tùy chỉnh.

Tạo một tệp có tên custom.d.ts với nội dung sau:

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

Thêm custom.d.tsvào tsconfig.jsonnhư bên dưới

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

Nguồn: https://webpack.js.org/guides/typescript/#importing-other-assets

Cảm ơn smarx đã chỉ ra cách sử dụng require(). Vì vậy, trong trường hợp của tôi, nó phải là:

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

hoạt động tốt trong các tệp * .tsx

Thêm một custom.d.tstệp (tôi đã tạo nó trên đường dẫn gốc của dir src của tôi) với đúng loại (nhờ RedMatt ):

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

Cài đặt svg-react-loader hoặc một số khác , sau đó:

• Sử dụng nó làm trình tải svg chính
• Hoặc nếu bạn đang di chuyển cơ sở mã và không muốn chạm vào phần đang làm việc (JS), hãy chỉ định trình tải khi nhập:

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

Sau đó, chỉ cần sử dụng nó như một thẻ JSX:

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

Giải pháp mà tôi tìm thấy: Trong dự án ReactJS, trong tệp react-app-env.d.ts, bạn chỉ cần xóa khoảng trống trong nhận xét như:

Trước

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

Sau

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

Tôi hy vọng sẽ giúp bạn

Tôi đã gặp vấn đề tương tự khi thử hướng dẫn REACT + sắp chữ.
Điều làm việc cho tôi là câu lệnh nhập sau đây.

import * as logo from 'logo.svg'

Đây là các phụ thuộc của tôi trong package.json.

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

Hy vọng nó sẽ giúp một ai đó.

Để sử dụng n nội dung trên mã với TypeScript , chúng ta cần hoãn loại cho những lần nhập này . Điều này yêu cầu tệp custom.d.ts biểu thị các định nghĩa tùy chỉnh cho TypeScript trong dự án của chúng tôi.

Hãy thiết lập một khai báo cho các tệp .svg:

custom.d.ts

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

Ở đây chúng tôi khai báo một mô-đun mới cho SVG bằng cách chỉ định bất kỳ lần nhập nào kết thúc bằng .svg và xác định nội dung của mô-đun là bất kỳ.

Có một cách khác để làm điều này mà chúng tôi đã triển khai: tạo các thành phần SVGs của bạn. Tôi đã làm điều này bởi vì nó làm tôi nghe trộm rằng tôi đang sử dụng requirecâu lệnh commonJS cùng với imports của tôi .

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

Nếu bạn đang sử dụng puglin slint, có thể anh ta đã vô hiệu hóa việc nghĩ rằng đó là một nhận xét nhưng không đọc được svg bạn cần mô-đun tập lệnh loại này chỉ cần tắt dòng và vui vẻ