Error: Cannot find file: 'index.js' does not match the corresponding name on disk: './node_modules/React/react'

Question

Here is an image of the error and the console error...

My code seems to be correct and the paths of the imports are good too, I don't understand why I'm getting this error.

Notifications.js

import React from 'React'

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

export default Notifications

ProjectList.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

It seems to work find when I just import Dashboard without its own imported Notifications and ProjectList imports, if that makes sense. — josephT, Mar 13 '19 at 19:30
Imports are case-sensitive. In Notifications.js and ProjectList.js you are importing from `'React'` (uppercase "R"). This should be a lowercase "r". — rickdenhaan, Mar 13 '19 at 19:30
In fact, the error message is "Cannot find 'React' module", which speaks for itself. There is no module React, but react — Vega, Jun 11 '21 at 16:45
even I'm facing this error. I hate react but have to do as its the next gen. — vibs2006, Nov 23 '22 at 11:55

score 150 · Accepted Answer · edited Mar 03 '21 at 21:00

150

import React from 'React'

should be

import React from 'react'

You are trying to import React instead of react. The name of module is case-sensitive, in this case the name is react.

edited Mar 03 '21 at 21:00

2240

1,547
2
12
30

answered Mar 13 '19 at 19:31

oxfn

6,590
2
26
34

score 3 · Answer 2 · answered Jun 10 '21 at 17:42

3

You can try this solution from Web-brackets.com
all you need to do is just rename the imported library from React to react with small r like this (on the first line)

import React from 'react';

reference https://web-brackets.com/discussion/6/-solved-cannot-find-file-index-js-does-not-match-the-corresponding-name-on-disk-react-js

answered Jun 10 '21 at 17:42

Mohamed Atef

115
8

Isn't this the accepted answer? What is new? – Vega Jun 11 '21 at 14:19

score 1 · Answer 3 · answered Mar 13 '19 at 19:33

Notification.js

import React from 'react'

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

 export default Notifications

ProjectList.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

module name is react not React and since imports are case-sensitive import React from 'React' is causing error

Yes, and it is what the accepted answer suggested – Vega Jun 11 '21 at 15:52 — Vega, Jun 11 '21 at 15:52

score 1 · Answer 4 · answered Apr 15 '20 at 07:13

1

So the issue is because you are not importing correctly. Like in my case it was :

import {Dropdown} from 'react-Bootstrap'

I corrected it to

import {Dropdown} from 'react-bootstrap'

Since import statement are case sensitive

answered Apr 15 '20 at 07:13

Kamesh Kumar Singh

651
9
11

This is what the accepted answer suggests – Vega Jun 11 '21 at 16:03

score 1 · Answer 5 · edited Nov 03 '20 at 21:14

1

I had the same problem and it was because I imported React not react so it should go like this ..

import React from 'react'

edited Nov 03 '20 at 21:14

Druckles

3,161
2
41
65

answered Nov 02 '20 at 11:43

Mena Aziz

99
1
2

Isn't this the accepted answer? – Vega Jun 11 '21 at 15:51

score 1 · Answer 6 · answered Apr 29 '21 at 16:22

I had the same issue. The thing is that the compilation process uses caches to optimize build time. It's a internal thing to "Babel Loader". To make sure you get a fully refreshed compilation process by webpacker/babel, delete the folder "node_modules/.cache" and run npm start again.

score 0 · Answer 7 · edited Apr 01 '20 at 15:17

0

I think you need to install react-router by using this command - npm install react-router-dom

Follow this link for further details. (https://reacttraining.com/react-router/web/guides/quick-start)

edited Apr 01 '20 at 15:17

troy

2,145
2
23
31

answered Apr 01 '20 at 08:29

Chanuga Jayathilaka

167
1
3

This is not relevant to the question – Vega Jun 11 '21 at 16:07

score -2 · Answer 8 · answered Apr 08 '21 at 17:35

-2

including when naming your file, in example you import App but the name on your file is app.js this wont allow the system to find the same name.

answered Apr 08 '21 at 17:35

maroangelobmercado

1

Error: Cannot find file: 'index.js' does not match the corresponding name on disk: './node_modules/React/react'

8 Answers8