Das Modul (nicht gefunden) in React.js kann nicht aufgelöst werden

95

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 HeaderKomponente

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.

Vladimir Jovanović
quelle
Fügen Sie export default Header;Ihre 'Header-Datei' hinzu
Rui Costa
1
Funktioniert immer noch nicht.
Vladimir Jovanović
2
Es scheint, Sie brauchen ohne import Header from './components/header/header'src. Der Dateipfad ist relativ zum Importieren des Dateipfads. Dann müssen Sie den Export Headeraus header.jsund Fix - App.renderMethode.
Yury Tarabanko
Wenn ich den componentsOrdner aus dem Ordner srcherausnehme, wird mir mitgeteilt, dass ich die node_modulesDateien ändern muss , was nicht meine Aufmerksamkeit ist.
Vladimir Jovanović
8
Sie müssen nichts bewegen. Sie haben einen falschen relativen Pfad. Wenn Sie in './src/app.js' importieren, sollte es 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'
Yury Tarabanko

Antworten:

129

Die Art und Weise, wie wir normalerweise verwenden, importbasiert auf dem relativen Pfad.

.und ..sind ähnlich wie wir sie verwenden navigieren in terminalwie cd ..von Verzeichnis zu gehen und mv ~/file .zu ein bewegen filezu aktuellen Verzeichnis.

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

In Ihrem Fall App.jsbefindet sich im src/Verzeichnis, während header.jsist in src/components. Zu importdir würde tun import 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.jsSie von importetwas benötigen card, 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 Suche node_modulesin einer bestimmten Reihenfolge bis zu reactfinden ist. Für ein detaillierteres Verständnis kann es hier gelesen werden .

Zac Kwan
quelle
In meinem Fall fehlte der Schrägstrich am Anfang. Vielen Dank!
RichArt
Ich habe den relativen Pfad korrekt hinzugefügt. Aber die beiden Punkte haben mir am Anfang geholfen, das Problem zu beheben. Vielen Dank.
Santosh
28

Wenn Sie eine Anwendung mit react-create-app erstellen, vergessen Sie nicht, die Umgebungsvariable festzulegen:

NODE_PATH=./src

Oder fügen Sie eine .envDatei zu Ihrem Stammordner hinzu.

comalex3
quelle
1
Dies ist derjenige, der für mich gelöst wurde. Ich habe eine einfache App.csszu src/und tat import App.css. Aber das gab mir den Fehler der Frage. Diese Antwort löste das Problem.
Maximiliano Guerra
9

Das Hinzufügen NODE_PATHals Umgebungsvariable in .envist veraltet und wird durch Hinzufügen zu "baseUrl": "./src", compilerOptionsin jsconfig.jsonoder ersetzt tsconfig.json.

Referenz

Melchia
quelle
7

Die Datei package-lock.json wurde gelöscht und dann ausgeführt

npm install

Lesen Sie weiter

Ivan_ug
quelle
4

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.jsum das Problem zu beheben!

So habe ich diesen Code in webpack.config.jszu lösen jsxalsjs

 module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Und dann Buildfehler weg!

Tuhin A.
quelle
2

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';
FBaez51
quelle
Ich hasse das gab mir die Antwort, weil ich die gleiche Ordnerstruktur hatte und anstatt es zu tun, tat ./components/header/headerich ./components/header... Ich bin zu alt für diese Art von Fehlern lolol
Chris
1

Ich 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

Bukunmi
quelle
1

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"
  },
seb_dom
quelle
1

Es gibt eine bessere Möglichkeit, den Import von Modulen in Ihre React App zu handhaben. Überlegen Sie Folgendes:

Fügen Sie jsconfig.jsonIhrem Basisordner eine Datei hinzu. Dies ist derselbe Ordner, der Ihre package.json enthält. Definieren Sie als Nächstes Ihre Basis-URL-Importe darin:

//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'
Michgolden Ukeje
quelle
0

Sie müssen sich im Projektordner befinden, wenn Sie sich in diesen Ordnern befinden srcoder publicaus diesen herauskommen müssen. Angenommen, Ihr Name für das Reaktionsprojekt lautet dann "Hallo-Reaktion"cd hello-react

Sobha
quelle
0

Sie sollten den Import-Header von 'ändern . / src / components / header / header 'bis

Header aus ' .. / src / components / header / header' importieren '

harun ugur
quelle
0

Sie können versuchen, 'npm install' im App-Ordner auszuführen. Dies könnte auch das Problem lösen. Es hat bei mir funktioniert.

Niki Palyi
quelle
0

Ich hatte das gleiche Problem und habe es gelöst. Überprüfen Sie, ob sich Ihre index.jsDatei im srcOrdner 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 srcOrdners befindet, ziehen Sie ihn einfach in den srcOrdner Ihres Editors, da die Dateien außerhalb des srcOrdners nicht importiert werden.

Dann können Sie mit importieren können ./components/header/header(in diesem Fall) Geben Sie hier die Bildbeschreibung ein

Biraj Gupta
quelle
-1

Ü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.

Saliya Wicky
quelle
-2

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!

Carlos A Avilez J.
quelle