React error: warn There are multiple modules with names that only differ in casing

Question

I am getting a warning about having 'multiple modules with names that only differ in casing'.

What I tried: Change import declarations of react, delete node modules and reinstall with npm i.

This is how I import react in my components: import React from 'react'

Here is the warning message:

This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/Downloads/website/node_modules/gatsby/dist/utils/babel-loader.js??ref--4-0!/Users/Downloads/website/node_modules/eslint-loader/index.js??ref--11-0!/Users/Downloads/website/src/components/DiscoverBannerIndex.js
    Used by 6 module(s), i. e.
    /Users/Downloads/website/node_modules/gatsby/dist/utils/babel-loader.js??ref--4-0!/Users/Downloads/website/node_modules/eslint-loader/index.js??ref--11-0!/Users/Downloads/website/src/pages/download/windows.js
* /Users/Downloads/website/node_modules/gatsby/dist/utils/babel-loader.js??ref--4-0!/Users/Downloads/website```

Answer 1

Typically this error means you've done something like this:

// in one file:
import Foo from "src/components/Foo"

// in another file:
import Foo from "src/components/foo"