facebook / facebook/docusaurus

TypeScript emits type errors “Cannot find modules '<path of raster images>' when raster images are imported

Offen
#8,683 5 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
bug
Vorherrschende Sprache
TypeScript
Sterne
66.2k
Forks
10k
Ø Merge
1 T. 3 Std.
Gemergte PRs (30 T.)
52

Beschreibung

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [X] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [X] I have tried creating a repro with https://new.docusaurus.io.
- [X] I have read the console error message carefully (if applicable).

### Description

In current Docusaurus version (2.x), no `declare module "*.png"`, `declare module "*.jpg"`, and so on are not defined and we get type erros when we try to import raster images unlike Next.js.
We have to avoid this kind of errors by adding these ambient declarations to `src/index.d.ts`.

To make matters worse, the `plugin-ideal-image` changes the type of imported supported images from `string` to `{src: {src: string, width: ...}, preSrc: string}`. (related: #8684) We will have to select proper ambient declarations. Next.js, which has a similar feature, resolves this problem by `next-env.d.ts` like:

```ts
///
///

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
```

### Reproducible demo

https://codesandbox.io/s/docusaurus-bug-report1-kptbhq

### Steps to reproduce

1. Setup using TypeScript template
2. Add `import picture from "../../blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg";` and `` to `src/pages/index.tsx`

### Expected behavior

No type errors

### Actual behavior

```
Cannot find module '../../blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg' or its corresponding type declarations.ts(2307)
```

![image](https://user-images.githubusercontent.com/12870451/219943719-5ccee68d-90ee-4ef0-b677-fb241f855753.png)

### Your environment

- Public source code: https://codesandbox.io/s/docusaurus-bug-report1-kptbhq
- Docusaurus version used: 2.3.1
- Environment name and version (e.g. Chrome 89, Node.js 16.4): CodeSandbox (Node 16) + TypeScript 4.9.5
- Operating system and version (e.g. Ubuntu 20.04.2 LTS): CodeSandbox

### Self-service

- [ ] I'd be willing to fix this bug myself.

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.