"Internal Server Error" error on localhost:3000 server when using the npm run dev command

Question

I’m studying Nextjs and used the npm create-next-app command to create a next template, but when I use the npm run dev command, which should open the application on port 3000, localhost:3000 returns "Internal Server Error", and the terminal returns a number of errors.

Terminal errors:

warn  - C:/Users/familia/Desktop/Guilherme/Projetos/NLW5/podcastrnext/node_modules/@babel/runtime/helpers/interopRequireDefault.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers: * C:\Users\familia\Desktop\Guilherme\Projetos\NLW5\podcastrnext\node_modules\@babel\runtime\helpers\interopRequireDefault.js
    Used by 4 module(s), i. e.
C:\Users\familia\Desktop\Guilherme\Projetos\NLW5\podcastrnext\node_modules\@next\react-refresh-utils\loader.js!C:\Users\familia\Desktop\Guilherme\Projetos\NLW5\podcastrnext\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!C:\Users\familia\Desktop\Guilherme\Projetos\NLW5\podcastrnext\node_modules\next\dist\client\router.js * C:\users\familia\desktop\guilherme\projetos\nlw5\podcastrnext\node_modules\@babel\runtime\helpers\interopRequireDefault.js
    Used by 10 module(s), i. e.
C:\Users\familia\Desktop\Guilherme\Projetos\NLW5\podcastrnext\node_modules\@next\react-refresh-utils\loader.js!C:\Users\familia\Desktop\Guilherme\Projetos\NLW5\podcastrnext\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!C:\users\familia\desktop\guilherme\projetos\nlw5\podcastrnext\node_modules\next\dist\client\dev\amp-dev.js

C:/Users/familia/Desktop/Guilherme/Projetos/NLW5/podcastrnext/node_modules/@babel/runtime/helpers/interopRequireWildcard.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers: * C:\Users\familia\Desktop\Guilherme\Projetos\NLW5\podcastrnext\node_modules\@babel\runtime\helpers\interopRequireWildcard.js
    Used by 1 module(s), i. e.
C:\Users\familia\Desktop\Guilherme\Projetos\NLW5\podcastrnext\node_modules\@next\react-refresh-utils\loader.js!C:\Users\familia\Desktop\Guilherme\Projetos\NLW5\podcastrnext\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!C:\Users\familia\Desktop\Guilherme\Projetos\NLW5\podcastrnext\node_modules\next\dist\client\router.js * C:\users\familia\desktop\guilherme\projetos\nlw5\podcastrnext\node_modules\@babel\runtime\helpers\interopRequireWildcard.js
    Used by 8 module(s), i. e.
C:\Users\familia\Desktop\Guilherme\Projetos\NLW5\podcastrnext\node_modules\@next\react-refresh-utils\loader.js!C:\Users\familia\Desktop\Guilherme\Projetos\NLW5\podcastrnext\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ref--4-1!C:\users\familia\desktop\guilherme\projetos\nlw5\podcastrnext\node_modules\next\dist\client\next-dev.js

C:/Users/familia/Desktop/Guilherme/Projetos/NLW5/podcastrnext/node_modules/@babel/runtime/helpers/typeof.js
There are multiple modules with names that only differ in casing.

Answer 1

Error: There are Multiple modules with Names that only differ in Casing

This problem usually occurs in windows, when you have the terminal pointing to the file and some part of the path differs from the original to the file exactly, including between upper and lower case letters. To solve this is very simple:

Just reopen your Vscode (if you have been through code .) again passing exactly the file path, taking care of the name of each folder to get to the project. Each letter must be uppercase or lowercase, the whole way to the project.
In other situations/errors than opening the project in Vscode, the solution is also valid.

You can also open by CMD directly, which apparently does not occur the error. (edited)

It worked for me, maybe it’s the same problem.

Answer 2

There is a probability that you are doing Next Module Import wrong.

Check the application’s Imports with if you have Maiscula letter or mininuscula letter.

Npm is indicating that it has multiple Import calls with the same name only being differentiated by the minuscule or uppercase letter in the Casing case

That is, you are importing modules with equal names only by changing between maiscula or minuscula what is causing the error.