Was tun, wenn „Require in React“ fehlschlägt?

Das Require in React schlägt fehl, da require ein ES-Modul anstelle einer Zeichenfolge zurückgibt. Die Lösung besteht darin, es über „require('../path/to/image.jpg').default;“ einzuführen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Was soll ich tun, wenn „Require in React“ fehlschlägt?

Die Gründe und Lösungen für ungültige Bilder, die von require im React-Projekt eingeführt wurden

Ursache

Wenn Sie die Create-React-App verwenden und require Bilder importieren möchten, gibt require ein ES-Modul anstelle einer Zeichenfolge zurück. Dies liegt daran, dass im File-Loader die esModule-Option standardmäßig aktiviert ist.

Lösung

const image = require('../path/to/image.jpg').default;
// OR
import image from '../path/to/image.jpg';

Der Unterschied zwischen require und import

require ist die Spezifikation von commonjs, die im Knoten implementierte API ist die Syntax von es, die vom Compiler verarbeitet wird. Daher kann der Import eine statische Analyse von Modulabhängigkeiten durchführen und Treeshaking mit Webpack, Rollup usw. durchführen.

Commonjs exportiert eine Kopie des Werts, require führt den kopierten Wert ein (Referenztypen kopieren nur die Referenz) und es-Modul exportiert denselben Wert (mit Ausnahme des Exportstandards), unabhängig davon, ob es sich um einen Basistyp oder einen Anwendungstyp handelt.

Es gibt Unterschiede in den Schreibmethoden. Sie können import * verwenden, um alle Exporte einzuführen, oder Sie können import aaa, {bbb} verwenden, um Standard- bzw. Nicht-Standard-Exporte einzuführen, was flexibler ist als erforderlich.

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonWas tun, wenn „Require in React“ fehlschlägt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!