21
votes

Erreur: fichier introuvable: «index.js» ne correspond pas au nom correspondant sur le disque: «./node_modules/React/react»

Voici une image de l'erreur et de l'erreur de console ...

Mon code semble être correct et les chemins des importations sont bons aussi, je ne comprends pas pourquoi j'obtiens cette erreur.

App.js

import React from 'React'

const ProjectList = () => {
    return(
        <div>
            <div className="project-list section">
                <div className="card z-depth-0 project-summary">
                    <div className="card-content grey-text darken-3">
                        <span className="card-title">Project Title</span>
                        <p>Posted by Net Ninja</p>
                        <p className="grey-text">3rd September, 2018</p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ProjectList

Dashboard.js

import React from 'React'

const Notifications = () => {
    return(
        <div>
            <p>Notifications</p>
        </div>
    )
}

export default Notifications

Notifications.js

import React, {Component} from 'react'
import Notifications from './Notifications'
import ProjectList from '../projects/ProjectList'

class Dashboard extends Component {
    render() {
        return(
            <div>
                <div className="dashboard container">
                    <div className="row">
                        <div className="col s12 m6">
                            <ProjectList/>
                        </div>
                        <div className="col s12 m5 offset-m1">
                            <Notifications/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Dashboard

ProjectList.js

import React, { Component } from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Navbar from './components/layout/Navbar'
import Dashboard from './components/dashboard/Dashboard'


class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navbar/>
          <Switch>
            <Route path="/" component={Dashboard}/>
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Et voici également une capture d'écran de la configuration de mon répertoire.

J'utilise également npm start, je ne sais pas si l'utilisation de yarn start ferait une différence?

reactjs react-router

2 commentaires

Cela semble fonctionner lorsque je viens d'importer Dashboard sans ses propres notifications importées et importations de ProjectList, si cela a du sens.

Les importations sont sensibles à la casse. Dans Notifications.js et ProjectList.js, vous importez depuis 'React' («R» en majuscule). Cela devrait être un «r» minuscule.

6 Réponses :

69
votes

import React from 'react'

5 commentaires

Oh putain, j'ai dû créer le type et le copier / coller sur l'autre composant. Merci, j'ai regardé ça toute la journée.

@josephT s'il vous plaît, votez pour et approuvez si la réponse était utile)

Trois heures à crier sur mon PC ... et puis j'ai trouvé cette réponse. Merci @oxfn !!

Cloué complètement !. Merci

Tu es l'homme! C'est correct.

1
votes

Notification.js

 import React from 'react'

 const ProjectList = () => {
 return(
    <div>
        <div className="project-list section">
            <div className="card z-depth-0 project-summary">
                <div className="card-content grey-text darken-3">
                    <span className="card-title">Project Title</span>
                    <p>Posted by Net Ninja</p>
                    <p className="grey-text">3rd September, 2018</p>
                </div>
            </div>
        </div>
    </div>
)
}

export default ProjectList

ProjectList.js

import React from 'react'

const Notifications = () => {
return(
    <div>
        <p>Notifications</p>
    </div>
)
}

 export default Notifications

le nom du module est react pas React et comme les importations sont sensibles à la casse, l'importation React de 'React' provoque une erreur

0 commentaires

0
votes

Je pense que vous devez installer react-router en utilisant cette commande - npm install react-router-dom

Suivez ce lien pour plus de détails. ( https://reacttraining.com/react-router/web/guides/quick-start )

0 commentaires

0
votes

Le problème est donc que vous n'importez pas correctement. Comme dans mon cas c'était:

import {Dropdown} from 'react-bootstrap'

Je l'ai corrigé en

import {Dropdown} from 'react-Bootstrap'

Étant donné que les instructions d'importation sont sensibles à la casse

0 commentaires

0
votes

J'ai eu le même problème et c'est parce que j'ai importé React pas de react donc ça devrait aller comme ça ..

import React from 'react'

1 commentaires

Cela a déjà été abordé dans d'autres réponses

0
votes

Vos instructions d'importation doivent lire Import React from 'react'

Vous avez capitalisé réagir.

0 commentaires