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

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.

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 .

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.

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

Referenz

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

npm install

Lesen Sie weiter

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!

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';

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

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"
  },

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'

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

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

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

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

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)

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

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!