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

Je pense que c'est la double utilisation de l'en-tête. Je viens moi-même d'essayer quelque chose de similaire et j'ai également rencontré des problèmes. J'ai mis la majuscule à mon fichier de composants pour qu'il corresponde aux autres et ça a marché.

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

Devrait être

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

Answer 2

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

Ajouter un jsconfig.json dans votre dossier de base. C'est le même dossier qui contient votre package.json. Définissez ensuite vos importations d'URL de base dans ce dossier :

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

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

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

Notez que 'components/' est différent de '../components/'.

C'est plus propre comme ça.

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

import logo from './logo.svg'

Answer 3

J'ai eu un problème similaire.

Cause :

import HomeComponent from "components/HomeComponent";

Solution :

import HomeComponent from "./components/HomeComponent";

NOTE : ./ était avant les composants. Vous pouvez lire le post de @Zac Kwan ci-dessus sur la manière d'utiliser les import

Answer 4

J'ai rencontré le même problème quand j'ai créé une nouvelle application react, j'ai essayé toutes les options dans https://github.com/facebook/create-react-app/issues/2534 mais ça n'a pas aidé. J'ai dû changer le port de la nouvelle application et 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"
  },

Answer 5

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.