web-dev-qa-db-fra.com

Impossible de résoudre le module (introuvable) dans React.js

Je ne peux pas croire que je pose une question évidente, mais l'erreur persiste quand même dans le journal de la console.

La console dit qu’elle ne trouve pas le module dans le répertoire, mais j’ai vérifié au moins 10 fois la faute de frappe. Quoi qu'il en soit, voici le code du composant.

Je veux rendre Header in root

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;

Ceci est le composant Header

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

J'ai vérifié au moins 10 fois que le module se trouve à cet emplacement ./src/components/header/header et qu'il l'est (le dossier "entête" contient "entête.js").

Pourtant, React lance toujours cette erreur:

Echec de la compilation

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

npm test dit la même chose. 

javascriptreactjs
37
Vladimir Jovanović

La façon dont nous utilisons habituellement import est basée sur le chemin relatif. 

. et .. sont similaires à la façon dont nous utilisons pour naviguer dans terminal comme cd .. pour sortir du répertoire et mv ~/file . pour déplacer une file dans le répertoire en cours.

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

Dans votre cas, App.js est dans le répertoire src/ alors que header.js est dans src/components. Pour import vous feriez import Header from './components/header'. Cela se traduit approximativement dans mon répertoire actuel, trouvez le dossier des composants contenant un fichier d’en-tête.

Maintenant, si à partir de header.js, vous devez import quelque chose à partir de card, vous le feriez. import Card from '../containers/card'. Cela se traduit par, quittez mon répertoire actuel, recherchez un conteneur de nom de dossier contenant un fichier de carte.

En ce qui concerne import React, { Component } from 'react', ceci ne commence pas par un ./ ou un ../ ou un /. Le noeud commence donc à rechercher le module dans le node_modules dans un ordre spécifique jusqu'à ce que react soit trouvé. Pour une compréhension plus détaillée, vous pouvez le lire ici .

44
Zac Kwan

Si vous créez une application avec react-create-app, n'oubliez pas de définir la variable d'environnement:

NODE_PATH=./src

Ou ajoutez au fichier .env dans votre dossier racine;

14
comalex3

J'ai eu un problème similaire.

Cause du problème:

import HomeComponent from "components/HomeComponent";

Solution au problème:

import HomeComponent from "./components/HomeComponent";

NOTE: ./ était avant les composants. Vous pouvez lire le post de @Zac Kwan ci-dessus sur l'utilisation de import

0
Bukunmi

vous devez être dans le dossier du projet, si vous êtes en src ou en public, vous devez sortir de ces dossiers, supposez que votre nom de projet-réaction est bonjour 

0
sobha