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

Question

Je ne peux pas croire que je pose une question évidente, mais j'obtiens toujours l'erreur dans le journal de la console.

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

Je veux rendre En-tête dans Racine

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;

C'est le Header composant

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 endroit. ./src/components/header/header et c'est le cas (le dossier "header" contient "header.js").

Pourtant, React jette toujours cette erreur :

Échec 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.

Answer 1

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

. et .. sont similaires à celles que nous utilisons pour naviguer dans terminal comme cd .. pour sortir de l'annuaire et mv ~/file . pour déplacer un file dans le répertoire actuel.

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

Dans votre cas, App.js est en src/ répertoire pendant que header.js est en src/components . Pour import vous feriez import Header from './components/header' . Cela signifie en gros que dans mon répertoire actuel, il faut trouver le dossier des composants qui contient un fichier d'en-tête.

Maintenant, si de header.js vous devez import quelque chose de card vous feriez ça. import Card from '../containers/card' . Cela se traduit par, sortir de mon répertoire actuel, chercher un nom de dossier conteneurs qui ont un fichier de carte.

Quant à import React, { Component } from 'react' ce qui ne commence pas par un ./ ou ../ ou / par conséquent, le nœud commencera à chercher le module dans le fichier node_modules dans un ordre spécifique jusqu'à react est trouvé. Pour une compréhension plus détaillée, on peut lire ici .

Answer 2

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

NODE_PATH=./src

Ou ajouter à .env dans votre dossier racine ;

Answer 3

J'ai supprimé le fichier package-lock.json puis j'ai exécuté

npm install

Lire la suite

Answer 4

Dans mon cas, le message d'erreur était

Module not found: Error: Can't resolve '/components/body

Alors que tout était dans le bon répertoire.

J'ai découvert que renommer body.jsx à body.js résolvez le problème !

J'ai donc ajouté ce code dans webpack.config.js pour résoudre jsx comme js

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

Et puis l'erreur de construction a disparu !

Answer 5

Ajout de NODE_PATH comme variable d'environnement dans .env est déprécié et est remplacé par l'ajout de "baseUrl": "./src" à compilerOptions sur jsconfig.json ou tsconfig.json .

Référence