CODEWITHSUNDEEP
reactjsgatsby
Blueris
Blueris

Reputation: 85

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

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```

Upvotes: 4

Views: 7201

Answers (3)

dbanswan
dbanswan

Reputation: 49

In case it helps in my case it was in next.js, I had imported in one page:

import {useRouter) from "next/Router"

and in other pages:

import {useRouter) from "next/router"

Difference is in the router vs Router.

Once I changed the first one as others, warning went away.

Upvotes: 0

Loïc V
Loïc V

Reputation: 635

In case it helps others:

In windows, I've created Index.ts (mistake) and then index.ts and for some reason after removing Index.ts I still had this issue. Removing also index.ts and doing index.ts from scratch solved it

Upvotes: 0

coreyward
coreyward

Reputation: 80128

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"

Upvotes: 15

Related Questions