Ich kann nicht glauben, dass ich eine offensichtliche Frage stelle, aber ich erhalte immer noch den Fehler im Konsolenprotokoll.
Die Konsole sagt, dass das Modul nicht im Verzeichnis gefunden werden kann, aber ich habe mindestens 10 Mal nach Tippfehlern gesucht. Wie auch immer, hier ist der Komponentencode.
Ich möchte den Header in root rendern
import React, { Component } from 'react'
import Header from './src/components/header/header'
import logo from './logo.svg'
import './App.css'
class App extends Component {
render() {
return (
<Header/>
);
}
}
export default App;
Dies ist die Header
Komponente
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import navBar from './src/components/header/navBar'
import './src/css/header.css'
class Header extends Component {
render() {
return {
<div>
<div id="particles-js"></div>
<navBar/>
<Title/>
</div>
};
}
}
ReactDOM.render(<Header/>, document.getElementById('header'));
Ich habe mindestens 10 Mal überprüft, ob sich das Modul an diesem Speicherort befindet ./src/components/header/header
, und zwar (Ordner "header" enthält "header.js").
Trotzdem löst React diesen Fehler aus:
Kompilierung fehlgeschlagen
./src/App.js
Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'
Der npm-Test sagt dasselbe.
quelle
export default Header;
Ihre 'Header-Datei' hinzuimport Header from './components/header/header'
src. Der Dateipfad ist relativ zum Importieren des Dateipfads. Dann müssen Sie den ExportHeader
ausheader.js
und Fix -App.render
Methode.components
Ordner aus dem Ordnersrc
herausnehme, wird mir mitgeteilt, dass ich dienode_modules
Dateien ändern muss , was nicht meine Aufmerksamkeit ist.import smth from './components/header/header'
für diese Zeile gleich sein,import navBar from './src/components/header/navBar'
es sollte relativ zum aktuellen Pfad seinimport navBar from './navBar'
Antworten:
Die Art und Weise, wie wir normalerweise verwenden,
import
basiert auf dem relativen Pfad..
und..
sind ähnlich wie wir sie verwenden navigieren interminal
wiecd ..
von Verzeichnis zu gehen undmv ~/file .
zu ein bewegenfile
zu aktuellen Verzeichnis.In Ihrem Fall
App.js
befindet sich imsrc/
Verzeichnis, währendheader.js
ist insrc/components
. Zuimport
dir würde tunimport Header from './components/header'
. Dies bedeutet ungefähr, dass Sie in meinem aktuellen Verzeichnis den Komponentenordner finden, der eine Header-Datei enthält.Wenn
header.js
Sie vonimport
etwas benötigencard
, würden Sie dies tun.import Card from '../containers/card'
. Dies bedeutet, dass Sie aus meinem aktuellen Verzeichnis herausgehen und nach Ordnern mit Ordnernamen suchen, die eine Kartendatei enthalten.Was
import React, { Component } from 'react'
dies beginnt nicht mit einem./
oder../
oder/
wird daher Knoten startet für das Modul in der Suchenode_modules
in einer bestimmten Reihenfolge bis zureact
finden ist. Für ein detaillierteres Verständnis kann es hier gelesen werden .quelle
Wenn Sie eine Anwendung mit react-create-app erstellen, vergessen Sie nicht, die Umgebungsvariable festzulegen:
Oder fügen Sie eine
.env
Datei zu Ihrem Stammordner hinzu.quelle
App.css
zusrc/
und tatimport App.css
. Aber das gab mir den Fehler der Frage. Diese Antwort löste das Problem.Das Hinzufügen
NODE_PATH
als Umgebungsvariable in.env
ist veraltet und wird durch Hinzufügen zu"baseUrl": "./src"
,compilerOptions
injsconfig.json
oder ersetzttsconfig.json
.Referenz
quelle
Die Datei package-lock.json wurde gelöscht und dann ausgeführt
Lesen Sie weiter
quelle
In meinem Fall war die Fehlermeldung
Module not found: Error: Can't resolve '/components/body
Während alles im richtigen Verzeichnis war.
Ich habe diese Umbenennung gefunden
body.jsx
,body.js
um das Problem zu beheben!So habe ich diesen Code in
webpack.config.js
zu lösenjsx
alsjs
module.exports = { //... resolve: { extensions: ['.js', '.jsx'] } };
Und dann Buildfehler weg!
quelle
Ich denke, es ist die doppelte Verwendung von Header. Ich habe selbst etwas Ähnliches ausprobiert und auch Probleme verursacht. Ich habe meine Komponentendatei groß geschrieben, damit sie mit den anderen übereinstimmt, und es hat funktioniert.
import Header from './src/components/header/header';
Sollte sein
import Header from './src/components/header/Header';
quelle
./components/header/header
ich./components/header
... Ich bin zu alt für diese Art von Fehlern lololIch hatte ein ähnliches Problem.
Ursache:
import HomeComponent from "components/HomeComponent";
Lösung:
import HomeComponent from "./components/HomeComponent";
HINWEIS:
./
war vor Komponenten. Sie können den obigen Beitrag von @Zac Kwan über die Verwendung lesenimport
quelle
Ich hatte das gleiche Problem, als ich eine neue Reaktions-App erstellte. Ich habe alle Optionen in https://github.com/facebook/create-react-app/issues/2534 ausprobiert, aber es hat nicht geholfen. Ich musste den Port für die neue App ändern und dann funktionierte es. Standardmäßig verwenden Apps den Port 3000. Ich habe den Port in package.json wie folgt in 8001 geändert:
"scripts": { "start": "PORT=8001 react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },
quelle
Es gibt eine bessere Möglichkeit, den Import von Modulen in Ihre React App zu handhaben. Überlegen Sie Folgendes:
//jsconfig.json { "compilerOptions": { "baseUrl": "./src" } }
Anstatt anzurufen
../../
, können Sie dies jetzt ganz einfach tun:import navBar from 'components/header/navBar' import 'css/header.css'
Beachten Sie, dass sich 'components /' von '../components/' unterscheidet.
Auf diese Weise ist es ordentlicher.
Wenn Sie jedoch Dateien in dasselbe Verzeichnis importieren möchten, können Sie dies auch tun:
import logo from './logo.svg'
quelle
Sie müssen sich im Projektordner befinden, wenn Sie sich in diesen Ordnern befinden
src
oderpublic
aus diesen herauskommen müssen. Angenommen, Ihr Name für das Reaktionsprojekt lautet dann "Hallo-Reaktion"cd hello-react
quelle
Sie sollten den Import-Header von 'ändern . / src / components / header / header 'bis
Header aus ' .. / src / components / header / header' importieren '
quelle
Sie können versuchen, 'npm install' im App-Ordner auszuführen. Dies könnte auch das Problem lösen. Es hat bei mir funktioniert.
quelle
Ich hatte das gleiche Problem und habe es gelöst. Überprüfen Sie, ob sich Ihre
index.js
Datei imsrc
Ordner befindet. Welche Datei Sie auch importieren, der Ordner, der diese Datei enthält, muss sich auch im Ordner src befinden.Das heißt, wenn sich Ihr Komponentenordner außerhalb des
src
Ordners befindet, ziehen Sie ihn einfach in densrc
Ordner Ihres Editors, da die Dateien außerhalb dessrc
Ordners nicht importiert werden.Dann können Sie mit importieren können
./components/header/header
(in diesem Fall)quelle
Überprüfen Sie die Importanweisungen. Sie sollten mit einem Semikolon beendet werden. Wenn Sie etwas verpassen, wird dieser Fehler angezeigt.
Überprüfen Sie auch, ob die folgende Importanweisung in Ihrer Komponente hinzugefügt wurde.
{threadId} aus 'worker_threads' importieren;
Wenn ja, entfernen Sie diese Zeile. Für mich geht das.
quelle
In meinem Fall, in dem ich eine Komponentendatei umbenenne, fügt ein VS-Code die folgende Codezeile für mich hinzu:
import React, { Component } from "./node_modules/react";
Also habe ich behoben, indem ich Folgendes entfernt habe:
./node_modules/
import React, { Component } from "react";
Prost!
quelle