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

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 trouve pas 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 l'en- tête à la 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 Headercomposant

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

Pourtant, React lève 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.

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

.et ..sont similaires à la façon dont nous utilisons pour naviguer dans terminalcomme cd ..pour sortir du répertoire et mv ~/file .pour déplacer un filevers le répertoire courant.

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

Dans votre cas, App.jsest dans le src/répertoire pendant que header.jsest dans src/components. Pour importvous feriez import Header from './components/header'. Cela se traduit à peu près dans mon répertoire actuel, recherchez le dossier des composants qui contient un fichier d'en-tête.

Maintenant, si de header.js, vous avez besoin de importquelque chose de card, vous le feriez. import Card from '../containers/card'. Cela se traduit par, sortez de mon répertoire actuel, recherchez des conteneurs de nom de dossier contenant un fichier de carte.

En ce qui concerne import React, { Component } from 'react', cela ne commence pas par un ./ou ../ou /donc le nœud commencera à rechercher le module node_modulesdans un ordre spécifique jusqu'à ce qu'il reactsoit trouvé. Pour une compréhension plus détaillée, il peut être lu ici .

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 .envfichier dans votre dossier racine;

L'ajout en NODE_PATHtant que variable d'environnement dans .envest obsolète et est remplacé par l'ajout "baseUrl": "./src", à compilerOptionsin jsconfig.jsonou tsconfig.json.

Référence

Supprimé le fichier package-lock.json, puis exécuté

npm install

Lire la suite

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 trouvé que renommer body.jsxpour body.jsrésoudre le problème!

J'ai donc ajouté ce code webpack.config.jspour résoudre jsxcommejs

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

Et puis erreur de construction disparue!

Je pense que c'est la double utilisation de l'en-tête. J'ai juste essayé quelque chose de similaire moi-même et j'ai également causé des problèmes. J'ai capitalisé mon fichier de composant pour correspondre aux autres et cela a fonctionné.

import Header from './src/components/header/header';

Devrait être

import Header from './src/components/header/Header';

J'ai eu un problème similaire.

Cause:

import HomeComponent from "components/HomeComponent";

Solution:

import HomeComponent from "./components/HomeComponent";

REMARQUE: ./ était avant les composants. Vous pouvez lire le post de @Zac Kwan ci-dessus sur la façon d'utiliserimport

J'ai rencontré le même problème lorsque j'ai créé une nouvelle application de réaction, j'ai essayé toutes les options de https://github.com/facebook/create-react-app/issues/2534 mais cela n'a pas aidé. J'ai dû changer le port de la nouvelle application, puis cela a fonctionné. Par défaut, les applications utilisent le port 3000.J'ai changé le port en 8001 dans package.json comme suit:

  "scripts": {
    "start": "PORT=8001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Vous devez être dans le dossier du projet, si vous y êtes srcou que publicvous devez sortir de ces dossiers. Supposons que le nom de votre projet react soit 'hello-react' alorscd hello-react

vous devez changer l'en-tête d'importation de ' . / src / components / header / header 'à

importer l'en-tête depuis ' .. / src / components / header / header'

Vous pouvez essayer d'exécuter «npm install» dans le dossier de l'application. Cela pourrait également résoudre le problème. Cela a fonctionné pour moi.

J'étais confronté au même problème et je l'ai résolu. Vérifiez si votre index.jsfichier est dans un srcdossier, puis quel que soit le fichier que vous importez, le dossier contenant celui-ci doit également se trouver dans le dossier src.

Cela signifie que si votre dossier de composants se trouve en dehors du srcdossier, faites-le simplement glisser dans le srcdossier de votre éditeur car les fichiers en dehors du srcdossier ne sont pas importés.

Ensuite, vous pourrez importer en utilisant ./components/header/header(dans ce cas)

Il existe une meilleure façon de gérer l'importation de modules dans votre application React. Pensez à faire ceci:

Ajoutez un jsconfig.jsonfichier à votre dossier de base. C'est le même dossier contenant votre package.json. Ensuite, définissez vos importations d'URL de base:

//jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

Maintenant, plutôt que d'appeler, ../../vous pouvez facilement le faire à la place:

import navBar from 'components/header/navBar'
import 'css/header.css'

Notez que «composants /» est différent de «../components/»

C'est plus net comme ça.

Mais si vous souhaitez importer des fichiers dans le même répertoire, vous pouvez également le faire:

import logo from './logo.svg'

Vérifiez les instructions d'importation, qui doivent se terminer par un point-virgule. Si vous en manquez, vous obtiendrez cette erreur.

Vérifiez également si l'instruction d'importation suivante a été ajoutée dans votre composant.

import {threadId} de 'worker_threads';

Si tel est le cas, supprimez cette ligne. Ça marche pour moi.

Dans mon cas, je renomme un fichier de composant, un code VS ajoute la ligne de code ci-dessous pour moi:

import React, { Component } from "./node_modules/react";

J'ai donc corrigé en supprimant le: ./node_modules/

import React, { Component } from "react";

À votre santé!