search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.13k stars 26.73k forks source link

Erorrs on create-next-app initialization #51383

Open vilelalabs opened 1 year ago

vilelalabs commented 1 year ago

Verify canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 18.16.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.6
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/github/vercel/next.js/tree/canary/examples/reproduction-template

To Reproduce

the code is just the provided. ANY change was made to original code that comes with create-next-app install

tested on:

commands used:

npx create-next-app@latest mysite
cd mysite
npm run dev

or (with create-next-app@13.4.7-canary.0)

npx create-next-app@canary mywebsite
cd mysite
npm run dev

on both, options were:

Need to install the following packages:
Ok to proceed? (y)
√ Would you like to use TypeScript with this project? ... No / 
√ Would you like to use ESLint with this project? ... No / 
√ Would you like to use Tailwind CSS with this project? ... / Yes
√ Would you like to use `src/` directory with this project? ... / Yes
√ Use App Router (recommended)? ... / Yes
√ Would you like to customize the default import alias? ... No / 
Creating a new Next.js app in D:\mywebsite.

Using npm.

Initializing project with template: app-tw

Installing dependencies:
- react
- react-dom
- next
- tailwindcss
- postcss
- autoprefixer

the code is just the provided. ANY change was made to original code that comes with create-next-app install

Describe the Bug

When running npm run dev I get this big errors/warnings in console: The part: There are multiple modules.... repeates at least 30 times more (I hidded due limits on writing issue here)

> next dev
- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- event compiled client and server successfully in 142 ms (18 modules)
- wait compiling /_error (client and server)...
- wait compiling / (client and server)...
- warn ./node_modules/next/dist/client/add-base-path.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:
* D:\mysite\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\loader.js!D:\mysite\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[1].oneOf[2].use[1]!D:\mysite\node_modules\next\dist\client\add-base-path.js
    Used by 2 module(s), i. e.
    D:\mysite\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\loader.js!D:\mysite\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[1].oneOf[2].use[1]!D:\mysite\node_modules\next\dist\shared\lib\router\router.js
* D:\mysite\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\loader.js!D:\mysite\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[1].oneOf[2].use[1]!D:\mysite\node_modules\next\dist\client\add-base-path.js
    Used by 3 module(s), i. e.
    D:\mysite\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\loader.js!D:\mysite\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[1].oneOf[2].use[1]!D:\mysite\node_modules\next\dist\client\page-loader.js

Import trace for requested module:
./node_modules/next/dist/client/add-base-path.js
./node_modules/next/dist/shared/lib/router/router.js

./node_modules/next/dist/client/add-locale.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:
* D:\mysite\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\loader.js!D:\mysite\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[1].oneOf[2].use[1]!D:\mysite\node_modules\next\dist\client\add-locale.js
    Used by 2 module(s), i. e.
    D:\mysite\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\loader.js!D:\mysite\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[1].oneOf[2].use[1]!D:\mysite\node_modules\next\dist\shared\lib\router\router.js
* D:\mysite\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\loader.js!D:\mysite\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[1].oneOf[2].use[1]!D:\mysite\node_modules\next\dist\client\add-locale.js
    Used by 3 module(s), i. e.
    D:\mysite\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\loader.js!D:\mysite\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[1].oneOf[2].use[1]!D:\mysite\node_modules\next\dist\client\page-loader.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:
* D:\mysite\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[1].oneOf[2].use!D:\mysite\node_modules\next\dist\shared\lib\head.js
    Used by 3 module(s), i. e.
    D:\mysite\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[1].oneOf[2].use!D:\mysite\node_modules\next\dist\pages\_error.js
* D:\mysite\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[1].oneOf[2].use!D:\mysite\node_modules\next\dist\shared\lib\head.js
    Used by 2 module(s), i. e.
    D:\mysite\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[1].oneOf[2].use!D:\mysite\node_modules\next\dist\pages\_error.js

Import trace for requested module:
./node_modules/next/dist/shared/lib/head.js
./node_modules/next/dist/pages/_error.js
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useContext')
    at useContext (D:\mysite\node_modules\react\cjs\react.development.js:1618:21)
    at Head (webpack-internal:///./node_modules/next/dist/shared/lib/head.js?04f70:149:44)
    at renderWithHooks (D:\mysite\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (D:\mysite\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)

    at renderToString (D:\mysite\node_modules\next\dist\server\render.js:82:55)
    at D:\mysite\node_modules\next\dist\server\render.js:914:112
    at NextTracerImpl.trace (D:\mysite\node_modules\next\dist\server\lib\trace\tracer.js:90:20)
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    - error TypeError: Cannot read properties of null (reading 'useContext')

PS: npm run build shows same errors PS2: npm run start shows: errors:

next start

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
Error: Cannot find module 'D:\mywebsite\.next\prerender-manifest.json'
Require stack:
- D:\mywebsite\node_modules\next\dist\server\next-server.js
- D:\mywebsite\node_modules\next\dist\server\next.js
- D:\mywebsite\node_modules\next\dist\server\lib\render-server.js
- D:\mywebsite\node_modules\next\dist\compiled\jest-worker\processChild.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at D:\mywebsite\node_modules\next\dist\server\require-hook.js:189:36
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at NextNodeServer.getPrerenderManifest (D:\mywebsite\node_modules\next\dist\server\next-server.js:1927:26)
    at new Server (D:\mywebsite\node_modules\next\dist\server\base-server.js:170:32)
    at new NextNodeServer (D:\mywebsite\node_modules\next\dist\server\next-server.js:173:9)
    at NextServer.createServer (D:\mywebsite\node_modules\next\dist\server\next.js:179:24)
    at async D:\mywebsite\node_modules\next\dist\server\next.js:200:31 {
  type: 'Error',
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\mywebsite\\node_modules\\next\\dist\\server\\next-server.js',
    'D:\\mywebsite\\node_modules\\next\\dist\\server\\next.js',
    'D:\\mywebsite\\node_modules\\next\\dist\\server\\lib\\render-server.js',
    'D:\\mywebsite\\node_modules\\next\\dist\\compiled\\jest-worker\\processChild.js'
  ]
}

Error occurs when browser is opened on localhost:3000 or on page refresh

Expected Behavior

Expected no errors, just webpage opening rightly on browser.

Which browser are you using? (if relevant)

Chrome 114.0.5735.134, Edge 114.0.1823.43

How are you deploying your application? (if relevant)

no deploy

mauron85 commented 1 year ago

same issue with useContext null. Not present in 13.3

vilelalabs commented 1 year ago

I returned to project and got this too:

Import trace for requested module:
./node_modules/next/dist/server/future/helpers/interception-routes.js
./node_modules/next/dist/client/components/router-reducer/compute-changed-path.js
./node_modules/next/dist/client/components/router-reducer/create-initial-router-state.js
./node_modules/next/dist/client/components/app-router.js
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could 
happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
- error TypeError: Cannot read properties of null (reading 'useContext')

[update 23/06/23] I returned I third time to this project and erase node_modules folder and did npm install again , then worked fine.

But when I started a new project It came with this same fails again.

[update 24/06/23] On next day I restarted project, and problem is back, I tried to remove node_modules and reinstall, but this time didn't solve, problem persists. but without last line about useContext

(...)
(same lots of error described before ...)
(...)
# end of errors is:

Import trace for requested module:
./node_modules/next/dist/server/future/helpers/interception-routes.js
./node_modules/next/dist/client/components/router-reducer/compute-changed-path.js
./node_modules/next/dist/client/components/router-reducer/create-initial-router-state.js
./node_modules/next/dist/client/components/app-router.js
vilelalabs commented 1 year ago

I notice that may be related to VSCode in some way. If VSCode is opened I have this problem, but if I start project with npm run dev in a separated terminal and after that I open VSCode, it works without problem. If I open in separated terminal and VSCode is open, I get errors or if I try to open using terminal inside VSCode. (both, inside VSCode and on terminal I use git bash (latest) as terminal).

mauron85 commented 1 year ago

I didn’t have issues running in dev mode. Not even from vscode. Only with prod builds.

pacelliv commented 1 year ago

did you manage to figured it out?

vilelalabs commented 1 year ago

@pacelliv Not exactly. I changed my OS from Windows 10 to full Linux (Mint 21) deveplopment and didn't had this issues never more.

pacelliv commented 1 year ago

At least in my case it wasn't a Nextjs issue but rather a mistake in the capitalization of the path shown in my terminal. For example, the actual path of the project is C:\Users\MyUser\Documents\dev\university\homeworks but in my terminal the path was C:\Users\MyUser\documents\dev\university\homeworks.

After updating documents to Documents the issue was solved.

victoroab commented 9 months ago

@pacelliv Thanks a lot, that fixed it for me

Anto-Napo commented 6 months ago

@pacelliv Thank you, it works, I wonder why VSCode doesn't set Documents by default