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

Vous devez changer l'import Header de ' . /src/components/header/header' à

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

Answer 2

Vous devez être dans le dossier projet, si vous êtes dans le dossier src ou public vous devez sortir de ces dossiers. Supposons que le nom de votre projet react soit 'hello-react', alors cd hello-react

Answer 3

J'étais confronté au même problème et je l'ai résolu. Voyez si votre index.js se trouve dans src puis, quel que soit le fichier que vous importez, le dossier qui le contient doit également se trouver dans le dossier src.

Cela signifie que si votre dossier de composants se trouve en dehors du src il suffit de le faire glisser dans le dossier src dans votre éditeur, car les fichiers situés en dehors du dossier src ne sont pas importés.

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

Answer 4

Pour moi, l'entrée était correcte mais npm start peut être bogué (du moins en l'utilisant avec Hyper terminal sous Windows et Linux). Si je déplace des fichiers dans des dossiers différents, npm start ne prend pas en compte ces changements. Je dois annuler le processus de démarrage de npm, effectuer le déplacement, sauvegarder et ensuite exécuter npm start et il verra les fichiers maintenant.

Answer 5

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

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

importez { threadId } de 'worker_threads' ;

Si oui, supprimez cette ligne. Cela fonctionne pour moi.