Nextjs does not run in Visual Studio Code, but works in command prompt

Asked

Viewed 88 times

-2

Hello, I created a standard Nextjs application using "npx create-next-app teste", I have not changed any standard file and Windows command prompt (CMD), when I use commands like "npm start", "npm run dev" etc. The application runs perfectly.

When I use the same commands using the Visual Studio Code terminal the error application.

Observing: I always use the terminal of Visual Studio, currently runs everything, application on Node, React and etc. I can use any command, even specific actions to move the Windows system, Just Nextjs error.

Structure of the original application: https://i.stack.Imgur.com/Yvokm.png

Running on the terminal: https://i.stack.Imgur.com/Jjgk9.png

Running in Visual Studio: https://i.stack.Imgur.com/1EH7q.png

Running Visual Studio Error 2: https://i.stack.Imgur.com/Ez73n.png

Visual Studio terminal error:

PS E:\Apps\Dhenyson-site\frontend\nextjs> npm run dev

> [email protected] dev E:\Apps\Dhenyson-site\frontend\nextjs
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
warn  - ./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:
* E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\@babel\runtime\helpers\interopRequireDefault.js
    Used by 5 module(s), i. e.
    E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\@next\react-refresh-utils\loader.js!E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ruleSet[1].rules[1].use[1]!E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\next\dist\client\router.js
* E:\Apps\Dhenyson-site\frontend\nextjs\node_modules\@babel\runtime\helpers\interopRequireDefault.js
    Used by 11 module(s), i. e.
    E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\@next\react-refresh-utils\loader.js!E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ruleSet[1].rules[1].use[1]!E:\Apps\Dhenyson-site\frontend\nextjs\node_modules\next\dist\client\next-dev.js

./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:
* E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\@babel\runtime\helpers\interopRequireWildcard.js
    Used by 2 module(s), i. e.
    E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\@next\react-refresh-utils\loader.js!E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ruleSet[1].rules[1].use[1]!E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\next\dist\client\router.js

Use equal casing. Compare these module identifiers:
* E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\react-is\cjs\react-is.development.js
    Used by 1 module(s), i. e.
    E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\react-is\index.js
* E:\Apps\Dhenyson-site\frontend\nextjs\node_modules\react-is\cjs\react-is.development.js
    Used by 1 module(s), i. e.
    E:\Apps\Dhenyson-site\frontend\nextjs\node_modules\react-is\index.js

./node_modules/react-is/index.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:
* E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\react-is\index.js
    Used by 1 module(s), i. e.
    E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\@next\react-refresh-utils\loader.js!E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ruleSet[1].rules[1].use[1]!E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\next\dist\next-server\lib\router\router.js
* E:\Apps\Dhenyson-site\frontend\nextjs\node_modules\react-is\index.js
    Used by 2 module(s), i. e.
    E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\@next\react-refresh-utils\loader.js!E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ruleSet[1].rules[1].use[1]!E:\Apps\Dhenyson-site\frontend\nextjs\node_modules\next\dist\client\index.js

./node_modules/react/cjs/react.development.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:
* E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\react\cjs\react.development.js
    Used by 2 module(s), i. e.
    E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\react\index.js
* E:\Apps\Dhenyson-site\frontend\nextjs\node_modules\react\cjs\react.development.js
    Used by 2 module(s), i. e.
    E:\Apps\Dhenyson-site\frontend\nextjs\node_modules\react\index.js

./node_modules/react/index.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:
* E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\react\index.js
    Used by 9 module(s), i. e.
    E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\@next\react-refresh-utils\loader.js!E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ruleSet[1].rules[1].use[1]!E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\next\dist\client\router.js
* E:\Apps\Dhenyson-site\frontend\nextjs\node_modules\react\index.js
    Used by 28 module(s), i. e.
    E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\@next\react-refresh-utils\loader.js!E:\Apps\Dhenyson-site\Frontend\nextjs\node_modules\next\dist\build\webpack\loaders\next-babel-loader.js??ruleSet[1].rules[1].use[1]!E:\Apps\Dhenyson-site\frontend\nextjs\node_modules\next\dist\client\index.js
info  - ready on http://localhost:3000
visual-studio visual-studio-code next

  • It would be nice to see that message.

  • Probably the briefcase. next was not created or created with something inside This discussion on github will probably help you https://github.com/vercel/next.js/discussions/14394

  • Augusto, I put the rest of the message. Diego, the folder . next was created, I read the link you passed, but infezlimente is another problem. I do not understand why the Windows terminal runs normally, and I already use Next for a while and never had this kind of mistake and not find on the internet. But I left all the information here to try to solve.

  • I do not understand why they give dislike... is a problem that I have looked on the net and did not find, I asked directly to programmer of more than 15 years of profession and did not solve... that is, 100% valid for me to put here in stackoverflow that can help other people... anyway, I’m studying the problem.

1 answer

0


To be able to solve, a very simple and basic mistake. When I opened the app with Visual Studio Code, for some reason it changed the "F" of the /Frontend path to a tiny "f". Well, in all projects here I realized that VS Code is doing this and yet other apps of other technologies do not give error, so it was really simple it was so hard to think about this problem.

And to solve I just did: In the terminal of VS Code exit the folder (cd..) and I went in again putting the right way (cd Frontend). Just this solved a problem that was giving huge headache... now I just need to know why VS Code is changing the path for tiny.

Browser other questions tagged visual-studio visual-studio-code next

You are not signed in. Login or sign up in order to post.