GeekyAnts / GeekyAnts/NativeBase

Not compatible with React 18 in Web + NextJS

Open
#5,573 6 comments 5 reactions 0 assignees View on GitHub
bug triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

When using React 18 with NextJs in web, I get the error: "Missing getServerSnapshot, which is required for server-rendered content."

### CodeSandbox/Snack link

Not able to create free codesandbox with react native installed (Too big)

### Steps to reproduce

1. Clone the repo:
https://github.com/GeekyAnts/nativebase-templates/tree/master/solito-universal-app-template-nativebase-typescript
2. Install latest version of native-base with required dependencies
3. Install react and react-dom 18
4. Run dev
5. Go to HTTP://localhost:3000
6. See the error

> Server Error
Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.
This error happened while generating the page. Any console logs will be displayed in the terminal window.

Stack trace:
Uncaught at Object.useSyncExternalStore (file:///Users/cyril/dev/nativebase-templates/solito-universal-app-template-nativebase-typescript/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5217:11)
at Object.useSyncExternalStore (file:///Users/cyril/dev/nativebase-templates/solito-universal-app-template-nativebase-typescript/node_modules/react/cjs/react.development.js:1676:21)
at useSubscription (webpack-internal:///../../node_modules/native-base/node_modules/use-subscription/cjs/use-subscription.development.js:37:15)
at useAppState (webpack-internal:///../../node_modules/native-base/lib/commonjs/core/color-mode/hooks.js:1:3122)
at useColorScheme (webpack-internal:///../../node_modules/native-base/lib/commonjs/core/color-mode/hooks.js:1:3400)
at useModeManager (webpack-internal:///../../node_modules/native-base/lib/commonjs/core/color-mode/hooks.js:1:3686)
at HybridProvider (webpack-internal:///../../node_modules/native-base/lib/commonjs/core/hybrid-overlay/HybridProvider.js:1:2145)
at renderWithHooks (file:///Users/cyril/dev/nativebase-templates/solito-universal-app-template-nativebase-typescript/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5661:16)
at renderIndeterminateComponent (file:///Users/cyril/dev/nativebase-templates/solito-universal-app-template-nativebase-typescript/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5734:15)
at renderElement (file:///Users/cyril/dev/nativebase-templates/solito-universal-app-template-nativebase-typescript/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5949:7)

### NativeBase Version

3.4.23

### Platform

- [ ] Android
- [ ] CRA
- [ ] Expo
- [ ] iOS
- [X] Next

### Other Platform

_No response_

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.