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

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

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.

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

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

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

import React from 'react'

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

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)

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.

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.