Ich benutze die Create-React-App. Ich versuche, ein Bild aus meinem öffentlichen Ordner aus einer Datei in meinem Ordner aufzurufen src/components
. Ich erhalte diese Fehlermeldung.
./src/components/website_index.js Modul nicht gefunden: Sie haben versucht, ../../public/images/logo/WC-BlackonWhite.jpg zu importieren, das außerhalb des Projektverzeichnisses src / liegt. Relative Importe außerhalb von src / werden nicht unterstützt. Sie können es entweder in src / verschieben oder einen Symlink aus den node_modules / des Projekts hinzufügen.
import logo from '../../public/images/logo_2016.png';
<img className="Header-logo" src={logo} alt="Logo" />
Ich habe viele Dinge gelesen, die besagen, dass Sie einen Import in den Pfad durchführen können, aber das funktioniert bei mir immer noch nicht. Jede Hilfe wäre sehr dankbar. Ich weiß, dass es viele Fragen wie diese gibt, aber alle sagen mir, dass ich ein Logo oder ein Bild so deutlich importieren soll, dass mir etwas im Gesamtbild fehlt.
quelle
../public/images/logo_2016.png
zweimal nach oben gegangen sein, zuerst aus dem Komponentenordner, dann aus dem src-Ordner.public
Ordner direkt in Ihremsrc
Ordner befindet. Ihr kommentarloser Kommentar enthält den alten Pfad, der mit beginnt. Sie sind sich../..
also nicht sicher, worum es Ihnen geht?Antworten:
Dies ist eine spezielle Einschränkung, die von Entwicklern der Create-React-App hinzugefügt wurde. Es wird implementiert,
ModuleScopePlugin
um sicherzustellen, dass sich Dateien in befindensrc/
. Dieses Plugin stellt sicher, dass relative Importe aus dem Quellverzeichnis der App nicht außerhalb davon gelangen.Sie können diese Funktion deaktivieren, jedoch erst nach dem
eject
Ausführen des Projekts "App erstellen, reagieren, App".Die meisten Funktionen und deren Updates sind in den Interna des Create-React-App-Systems verborgen. Wenn Sie machen, werden
eject
Sie einige Funktionen und deren Update nicht mehr haben. Wenn Sie also nicht bereit sind, die mitgelieferte Anwendung zum Konfigurieren von Webpack usw. zu verwalten und zu konfigurieren, führen Sie keineeject
Operation aus.Spielen Sie nach den bestehenden Regeln (gehen Sie zu src). Aber jetzt können Sie wissen , wie Einschränkung zu entfernen: tun ,
eject
und entfernen SieModuleScopePlugin
aus webpack Konfigurationsdatei .Seit create-react-app v0.4.0 kann mit der
NODE_PATH
Umgebungsvariablen ein Pfad für den absoluten Import angegeben werden. Und da v3.0.0NODE_PATH
zugunsten der EinstellungbaseUrl
injsconfig.json
oder veraltet isttsconfig.json
.Beim absoluten Import kann
import App from 'App'
stattdessenimport App from './App'
relativ zum in der Basis-URL angegebenen Wert verwendet werden.Diese Funktion ist besonders nützlich für Monorepos oder andere Konfigurationsfragen, jedoch nicht zum Importieren von Bildern oder anderen Elementen aus Ordnern
public
.Der Inhalt des
public
Ordners wird imbuild
Ordner abgelegt und ist über die relative URL verfügbar. Außerdem wird alles, was importiert wird, per Webpack verarbeitet und auch in einembuild
Ordner abgelegt .Wenn Sie etwas aus einem
public
Ordner importieren , wird dieses Ding wahrscheinlich imbuild
Ordner dupliziert und ist über zwei verschiedene URLs (oder mit verschiedenen Möglichkeiten zum Laden) verfügbar, was letztendlich die Downloadgröße des Pakets verschlechtert.Der Import aus dem src- Ordner ist vorzuziehen und hat Vorteile. Alles wird per Webpack in das Bündel gepackt, wobei die Brocken die optimale Größe und die beste Ladeeffizienz aufweisen .
Es gibt Zwischenlösungen, nämlich das Rewire- System, mit dem Sie die Webpack-Konfiguration programmgesteuert ändern können. Das Entfernen des
ModuleScopePlugin
Plugins ist jedoch keine gute Lösung. Es ist besser, voll funktionsfähige zusätzliche Verzeichnisse hinzuzufügen, die denen ähnelnsrc
.Derzeit werden
create-react-app
keine weiteren Verzeichnisse alssrc
im Stammordner unterstützt. Dies kann mit dem React-App-Rewire-Alias erfolgenquelle
create-react-app
für diejenigen ausgeführt werden, die die Webpack-Konfiguration nicht auswerfen möchten. Persönlich werfe ich immer aus, aber einige Leute fühlen sich nicht wohl und spielen doch mit der entmutigenden Konfiguration von Webpacks.NODE_PATH=./src/..
in der.env
Datei beseitigt . Auf diese Weise können Sie von außerhalb des src-Ordners importieren, ohne die mit dem Auswerfen Ihrer App verbundenen Probleme zu haben.Das Paket react-app-rewired kann verwendet werden, um das Plugin zu entfernen. Auf diese Weise müssen Sie nicht auswerfen.
Befolgen Sie die Schritte auf der npm-Paketseite (installieren Sie das Paket und drehen Sie die Aufrufe in der Datei package.json um) und verwenden Sie eine
config-overrides.js
ähnliche Datei wie diese:Dadurch wird das ModuleScopePlugin aus den verwendeten WebPack-Plugins entfernt, der Rest bleibt jedoch unverändert, und das Auswerfen entfällt.
quelle
react-app-rewired
mit [ github.com/arackaf/customize-cra weibl . ( Customize-cra) weiter nutzen . Dann wird die Konfiguration nurbabelInclude([path.resolve('src'), path.resolve('../common')])
und verwendenremoveModuleScopePlugin()
.config-overrides.js
Datei, in die Sie den Code einfügen können.ModuleScopePlugin
Plugin zu entfernen ist keine gute Idee. Es ist besser, voll funktionsfähige zusätzliche Verzeichnisse hinzuzufügen, ähnlich wie bei dersrc
Verwendung des React-App-Rewire-AliasUm den Antworten anderer ein bisschen mehr Informationen zu bieten. Sie haben zwei Möglichkeiten, wie Sie die PNG-Datei an den Benutzer senden können. Die Dateistruktur sollte der von Ihnen gewählten Methode entsprechen. Die zwei Optionen sind:
Verwenden Sie das
import x from y
mit der React-Create-App gelieferte Modulsystem ( ) und bündeln Sie es mit Ihrem JS. Legen Sie das Bild in densrc
Ordner.Servieren Sie es aus dem
public
Ordner und lassen Sie Node die Datei bereitstellen. create-react-app enthält anscheinend auch eine Umgebungsvariable, z<img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
. Dies bedeutet, dass Sie in Ihrer React-App darauf verweisen können, es aber weiterhin über Node bereitstellen können, wobei Ihr Browser es in einer normalen GET-Anforderung separat anfordert.Quelle: create-react-app
quelle
Wenn sich Ihre Bilder im öffentlichen Ordner befinden, sollten Sie verwenden
in Ihrem
<img>
src
statt zu importierenDas wird funktionieren
quelle
<img src="...">
und ihn nicht importieren<img src="/images/logo.png" alt="Logo" />
Sie müssen
WC-BlackonWhite.jpg
in Ihrsrc
Verzeichnis wechseln . Daspublic
Verzeichnis ist für statische Dateien vorgesehen, die direkt im HTML-Code verlinkt werden (z. B. das Favicon), und nicht für Inhalte, die Sie direkt in Ihr Bundle importieren möchten.quelle
Es gibt einige Antworten, die Lösungen bieten
react-app-rewired
, abercustomize-cra
eine spezielleremoveModuleScopePlugin()
API verfügbar machen, die etwas eleganter ist. (Es ist die gleiche Lösung, aber vomcustomize-cra
Paket weg abstrahiert .)npm i --save-dev react-app-rewired customize-cra
package.json
config-overrides.js
quelle
Entfernen Sie es mit Craco:
quelle
Diese Einschränkung stellt sicher, dass sich alle Dateien oder Module (Exporte) im
src/
Verzeichnis befinden, in dem sich die Implementierung befindet./node_modules/react-dev-utils/ModuleScopePlugin.js
, und zwar in den folgenden Codezeilen.Sie können diese Einschränkung durch aufheben
eject
dannModuleScopePlugin.js
aus dem Verzeichnis.const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
von./node_modules/react-scripts/config/webpack.config.dev.js
PS: Vorsicht vor den Folgen des Auswurfs .
quelle
Installieren Sie diese beiden Pakete
package.json
config-overrides.js
quelle
Sie müssen nicht auswerfen, Sie können die
react-scripts
Konfiguration mit der Rescripts-Bibliothek ändernDas würde dann funktionieren:
quelle
Ich denke, die Lösung von Lukas Bach zur Verwendung von React-App-Rewired zum Ändern der Webpack-Konfiguration ist ein guter Weg. Ich würde jedoch nicht das gesamte ModuleScopePlugin ausschließen, sondern stattdessen die spezifische Datei auf die Whitelist setzen, die außerhalb von src importiert werden kann:
config-overrides.js
quelle
Bild im öffentlichen Ordner
quelle
Wenn Sie nur eine einzelne Datei wie README.md oder package.json importieren müssen, kann diese explizit zu ModuleScopePlugin () hinzugefügt werden.
config / paths.js
config / webpack.config.dev.js + config / webpack.config.prod.js
quelle
Die beste Lösung ist das Gabeln
react-scripts
, dies wird tatsächlich in der offiziellen Dokumentation erwähnt, siehe: Alternativen zum Auswerfenquelle
Wenn Sie mehrere Änderungen benötigen, wie z bei Verwendung des Ameisendesigns , können Sie mehrere Funktionen wie folgt kombinieren:
quelle
Neben der Antwort von Bartek Maciejiczek sieht es bei Craco folgendermaßen aus:
quelle