reactjs - Kuvien tuominen TypeScript Reactissa - "Moduulia ei löydy"

Yritän tuoda kuvia käytettäväksi React-komponentissa TypeScriptin kanssa. Käyttämäni pakkaaja on Parcel (ei Webpack).

Olen luonut projektin sisälle .d.ts-tiedoston kuvatiedoston päätteelle ja sisällyttänyt sen tsconfig.json-tiedostoon. Kuitenkin, kun yritän tuoda kuvan, TS huutaa minulle Cannot find module.

Projektirakenteeni:

+ src
  + assets
    - image.jpg
  + components
    - Box.tsx
    - App.tsx
  - index.d.ts
  - index.html
  - index.tsx
- tsconfig.json
- tslint.json

Yritin tuoda kuvan App.tsx:ssä näin. VS Code alleviivasi '../assets/image.jpg' ja sanoi Moduulia '../assets/image.jpg' ei löydy.

import * as React from 'react';
import * as img from '../assets/image.jpg';

const Box = props => {
  // do things...
}

export default Box;

Verkosta löytämäni keskustelut viittaavat tarpeeseen määritellä .d.ts-tiedosto itse, joten loin sen index.d.ts-tiedoston tällä rivillä.

declare module '*.jpg';

Sitten lisättiin "include": ["./src/index.d.ts"] sisälle tsconfig.json, "compilerOptions" : {...} jälkeen.

Mitä jäin paitsi? Miten voin korjata virheen, jonka TS heittää?

Vastaus #1

Luo tiedosto index.d.ts kansioon src ja lisää tämä rivi:

declare module '*.jpg';

Vastaus #2

Jos kirjoitit kirjaimellisesti "include": ["./src/index.d.ts"] tsconfig.json -tiedostoon etkä määritä "files" -asetusta, se tarkoittaa, että tsconfig.json -tiedoston määrittelemä projekti sisältää vain yksittäisen tiedoston ./src/index.d.ts. Kun avaat minkä tahansa muun tiedoston VS Codessa, VS Code käyttää erillistä kielenpalveluinstanssia, joka ei käytä sinun tsconfig.json-tiedostoasi. Säädä "include" -asetuksesi vastaamaan kaikkia projektisi .ts ja .tsx -tiedostoja, tai poista se ja luota oletuskäyttäytymiseen, joka sisältää kaikki tsconfig.json-tiedostoa sisältävän hakemiston tiedostot.

Kierros 2

TypeScript ohittaa index.d.ts-tiedoston, koska se olettaa, että index.d.ts on luotu index.tsx-tiedostosta ja index.tsx on todennäköisemmin ajan tasalla. Nimeä index.d.ts-tiedostosi jollain muulla tavalla, esimerkiksi declaration.d.ts.

Vastaus #3

Luo moduuli/tyyppi

src/types/images.d.ts
declare module '*.jpg';
declare module '*.jpeg';

Vaihda tsconfig.json

{
    "compilerOptions": {
        "typeRoots" : ["node_modules/@types", "src/types"]
    }
}

Vastaus #4

Tähän ongelmaan voi olla monia ratkaisuja

Ratkaisu #1:
Käytä require-komentoa kuvan lisäämiseen

<img src={require('../../assets/logo.png')} alt="" />

Ratkaisu #2:

Sen sijaan, että toisit kuvia muodossa import logo from "../../assets/logo.png"

Tuo kuten const logo=require("../../assets/logo.png");

sitten käytä sitä kuten

<img src={logo} alt="" />

Ratkaisu #3:
Sinun src-kansiossasi on react-app-env.d.ts-tiedosto. Jos et näe sitä, luo uusi tiedosto src-kansioon nimeltä react-app-env.d.ts.

Nyt lisää tämä koodi tiedostoosi react-app-env.d.ts.

declare module "*.png";
declare module "*.svg";
declare module "*.jpeg";
declare module "*.jpg";

Ratkaisu #4:
Luo declaration.d.ts src-kansioosi.
Lisää sitten siihen seuraava teksti.

declare module "*.png";
declare module "*.svg";
declare module "*.jpeg";
declare module "*.jpg";

Nyt sinun täytyy saada tsconfig.json-tiedostosi näyttämään tältä:

{
  "compilerOptions": {},
  "include": [
    "src",
    "src/declaration.d.ts",
  ]
}

Ratkaisu #5:

Luo types-kansio src-kansiosi sisälle ja lisää images.d.ts tähän kansioon. Lisää siihen alla oleva teksti.

declare module "*.png";
declare module "*.svg";
declare module "*.jpeg";
declare module "*.jpg";

Konfiguroi nyt tsconfig.json näin:

{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types",
      "src/types"
    ],
}

Vastaus #5

Tehdäksesi seuraavaa "react": "^18.2.0" kanssa Typescriptissä:

  1. Luo tiedosto nimeltä: declaration.d.ts src/-hakemistoon.
  2. Lisää nämä koodirivit:
declare module "*.jpg"
declare module "*.png"

Siinä se, virheen pitäisi olla poissa.

Onnea!

Vastaus #6

siihen on olemassa kiertotapa, esimerkiksi,

import logo from "../../assets/logo.png"

muuta tämä

const logo =  require("../../assets/logo.png")

Vastaus #7

Tähän meni minulta noin tunti, joten jään jättämään ratkaisun, joka toimi minulle.

Matt McCutchenin ratkaisu toimi osittain minulla, mutta kohtasin silti VSCode-virheen. Tämän ratkaisemiseksi siirsin tsconfig.json- ja index.d.ts-tiedostoni juurihakemistoon, EN src-hakemistoon. Nyt haluat, että tsconfig.json-tiedostosi näyttää tältä:

"include": ["src", "index.d.ts"]

Ja index.d.ts-tiedostollesi tämä:

declare module '*.png';
declare module '*.jpg';

(^säätö kirjoitustarpeisiisi)

Aiheeseen liittyviä artikkeleita