TypeError: Cannot read properties of null (reading 'useState')

[thgilartlu]

Steps to recreate:

1. gh repo clone mickasmt/astro-nomy
2. cd astro-nomy
3. pnpm install
4. pnpm run dev

Error output:

> astro-nomy@0.1.0 dev C:\Users\xxxxx\src\astro-nomy
> astro dev

21:11:45 [WARN] [config] The feature "astro:env getSecret" is experimental and subject to change (used by @astrojs/vercel/serverless).
21:11:45 [types] Generated 14ms

 astro  v4.12.0 ready in 1938 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

21:11:45 [astro:db] New local database created.
21:11:45 [astro:db] Seeded database.
21:11:45 watching for file changes...
21:11:49 [astro-icon] Loaded icons from src/icons, lucide, mdi, ri
21:11:50 [200] / 72ms
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.
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.
21:11:50 [ERROR] Cannot read properties of null (reading 'useState')
  Stack trace:
    at C:\Users\xxxxx\src\astro-nomy\node_modules\.pnpm\react@18.3.1\node_modules\react\cjs\react.development.js:1622:21
    [...] See full stack trace in the browser, or rerun with --verbose.
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.
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.
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.
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.