Kan svg-bestanden niet importeren in typoscript

In typescript(*.tsx)-bestanden kan ik geen SVG-bestand importeren met deze verklaring:

import logo from './logo.svg';

Transpiler zegt:[ts] cannot find module './logo.svg'.
Mijn svg-bestand is gewoon <svg>...</svg>.

Maar in het .js-bestand kan ik het zonder problemen importeren met exact dezelfde importinstructie. Ik veronderstel dat het iets te maken heeft met het type SVG-bestand dat op de een of andere manier moet worden ingesteld voor ts transpiler.

Kun je alsjeblieft vertellen hoe je dit kunt laten werken in ts-bestanden?

Antwoord 1, autoriteit 100%

Als u een webpack gebruikt, kunt u dit doen door een bestand met aangepaste typen te maken.

Maak een bestand met de naam custom.d.tsmet de volgende inhoud:

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

Voeg de custom.d.tstoe aan tsconfig.jsonzoals hieronder

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

Bron: https://webpack.js.org/guides/typescript /#importing-other-assets

Antwoord 2, autoriteit 17%

Bedankt smarxvoor het wijzen op gebruik require(). Dus in mijn geval zou het moeten zijn:

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

wat prima werkt in *.tsx-bestanden

Antwoord 3, autoriteit 12%

• Als je create-react-app 2+gebruikt: docs

Voeg een custom.d.ts-bestand toe (ik heb het gemaakt op het hoofdpad van mijn src-dir) met het juiste type (dankzij RedMatt):

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

Installeer svg-react-loaderof een other, dan:

• Gebruik het als de belangrijkste svg-lader
• Of als u een codebase migreert en het werkende deel (JS) niet wilt aanraken, specificeert u de lader bij het importeren:

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

Gebruik het dan gewoon als een JSX-tag:

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

Antwoord 4, autoriteit 3%

De oplossing die ik vond: in het ReactJS-project, in het bestand react-app-env.d.ts verwijder je gewoon de spatie in de opmerking, zoals:

Vóór

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

Na

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

Ik hoop je te kunnen helpen

Antwoord 5, autoriteit 2%

Je kunt de module voor svg’s op dezelfde manier declareren als create-react-app:

react-app.d.ts

declare module '*.svg' {
  import * as React from 'react';
  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;
  const src: string;
  export default src;
}

zie bron

Antwoord 6, autoriteit 2%

Als we non-code-items met TypeScriptwillen gebruiken, moeten we het type voor deze importsuitstellen. Dit vereist een custom.d.ts-bestand dat aangepaste definities voor TypeScript in ons project aangeeft.

Laten we een aangifte instellen voor .svg-bestanden:

custom.d.ts

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

Hier declareren we een nieuwe module voor SVG’s door elke import op te geven die eindigt op .svg en de inhoud van de module als willekeurig te definiëren.

Antwoord 7

Ik had hetzelfde probleem tijdens het uitproberen van een REACT + typoscript-tutorial.
Wat voor mij werkte, was de volgende importverklaring.

import * as logo from 'logo.svg'

Hier zijn mijn afhankelijkheden in package.json.

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

Ik hoop dat het iemand helpt.

Antwoord 8

Er is een alternatieve manier om dit te doen die we hebben geïmplementeerd: maak uw SVGs-componenten. Ik deed dit omdat ik er last van had dat ik commonJS require-instructies gebruikte naast mijn imports.

Antwoord 9

Als je de Create-React-Appstarter gebruikt, zorg er dan voor dat de react-app-env.d.tsbevat de regel:

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

Antwoord 10

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

Als je de puglin-slint gebruikt, kan het zijn dat hij het heeft uitgeschakeld omdat hij denkt dat het een opmerking was, maar om de svg niet te lezen, je hebt dit type scriptmodule nodig, schakel gewoon de regel uit en wees blij

Antwoord 11

Als u webpack gebruikt, installeert u svg-inline-loader, voegt u de module toe aan de webpack.config.js:

{
    test: /\.svg$/,
    loader: 'svg-inline-loader',
}

Het werkt goed na het bouwen.

Als uw IDE een interactief fout rapporteert, kan dit worden opgelost door //@ts-ignoretoe te voegen:

//@ts-ignore
import logo from './logo.svg';

svg-inline-loader webpack-documentatie

Antwoord 12

Importeer een SVG-bestand in een CRA-app

Als u een SVG-bestand in een CRA-app (create-react-app) wilt importeren zonder een configuratie uit te voeren, kunt u een van deze methoden gebruiken:

Methode 1

import { ReactComponent as MyIcon } from "./assets/images/my-icon.svg";
...
<MyIcon />

Methode 2

import myIconFileName from './assets/images/my-icon.svg';
...    
<img src={myIconFileName} />

Antwoord 13

Hoop! Dit zal iemand helpen.

Eigenlijk heb ik alle stappen geprobeerd, maar één ding moeten we begrijpen, je moet het custom.d.ts-bestand maken in de bijbehorende SVG-importmap.

ts-configuratiebestand

{
  "compilerOptions": {
    "target": "ES6",
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "Node",
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@styles/*": ["src/styles/*"],
      "@static/*": ["src/static/*"]
    },
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src/**/*", "src/static/optional.d.ts"],
  "exclude": ["node_modules", "build"]
}

optioneel.d.ts

declare module '*.svg' {
    import * as React from 'react';
    export const ReactComponent: React.FunctionComponent<React.SVGProps<
        SVGSVGElement
    > & { title?: string }>;
    const src: string;
    export default src;
}

Eindelijk het algemene exportbestand:

import Logo from './images/logo.svg';
import BellDot from './images/bell-dot.svg';
import Logout from './images/logout.svg';
import pageNotFound from './images/page-not-found.png';
export {
    Logo,
    BellDot,
    pageNotFound,
    Logout
}

Voor een beter idee:

Antwoord 14

Voor mij werkte geen van de bovenstaande oplossingen alleen. Omdat ik het Webpack niet gebruik in mijn huidige project.

Ik heb de uitvoer in het logboek onderzocht en de volgende manier werkte voor mij, zonder een bestand (custom.d.ts) te maken, de configuratie te wijzigen of een nieuwe afhankelijkheid te installeren:

const logo: string = require("../assets/images/logo.svg").default;
<img src={logo} alt="logo" />