it-swarm.com.de

Modul kann in React.js nicht aufgelöst werden

Ich kann nicht glauben, dass ich eine offensichtliche Frage stelle, aber ich bekomme immer noch den Fehler im Konsolenprotokoll.

Console sagt, dass es das Modul nicht im Verzeichnis finden kann, aber ich habe mindestens 10 Mal den Tippfehler überprüft. Wie auch immer, hier ist der Komponentencode.

Ich möchte 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 Ort ./src/components/header/header befindet, und es ist (Ordner "header" enthält "header.js").

Trotzdem wirft React immer noch diesen Fehler:

Fehler beim Kompilieren

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

npm test sagt dasselbe. 

37

Die Art, wie wir normalerweise import verwenden, basiert auf dem relativen Pfad. 

. und .. sind ähnlich wie bei der Navigation in terminal, wie cd .., um das Verzeichnis zu verlassen, und mv ~/file ., um eine file in das aktuelle Verzeichnis zu verschieben.

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

In Ihrem Fall befindet sich App.js im src/-Verzeichnis, während header.js in src/components ist. Um import würden Sie import Header from './components/header' tun. Dies wird ungefähr in mein aktuelles Verzeichnis übersetzt: Finden Sie den Komponentenordner, der eine Header-Datei enthält.

Wenn Sie nun von header.js etwas von importcard benötigen, müssen Sie dies tun. import Card from '../containers/card'. Dies übersetzt nach, verschiebt sich aus meinem aktuellen Verzeichnis, sucht nach Ordnernamenscontainern, die über eine Kartendatei verfügen.

Wie bei import React, { Component } from 'react' beginnt dies nicht mit einem ./ oder ../ oder /. Daher sucht der Knoten in einer bestimmten Reihenfolge nach dem Modul in node_modules, bis react gefunden wird. Für ein detaillierteres Verständnis können Sie hier lesen.

44
Zac Kwan

Wenn Sie eine Anwendung mit „react-create-app“ erstellen, vergessen Sie nicht, die Umgebungsvariable zu setzen:

NODE_PATH=./src

Oder zur .env-Datei in Ihrem Stammordner hinzufügen;

14
comalex3

Ich hatte ein ähnliches Problem.

Ursache eines Problems:

import HomeComponent from "components/HomeComponent";

Lösung zum Problem:

import HomeComponent from "./components/HomeComponent";

HINWEIS: ./ war vor Komponenten. Sie können den Beitrag von @Zac Kwan oben lesen, wie import verwendet wird.

0
Bukunmi

sie müssen sich im Projektordner befinden. Wenn Sie sich in src oder public befinden, müssen Sie aus diesen Ordnern herauskommen. Angenommen, Ihr Name für das reaktionsprojekt ist hallo-reagieren, dann cd hallo-reagieren 

0
sobha