Not compatible with React 18 in Web + NextJS

cgorrieri commented 1 year ago

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

Clone the repo: https://github.com/GeekyAnts/nativebase-templates/tree/master/solito-universal-app-template-nativebase-typescript
Install latest version of native-base with required dependencies
Install react and react-dom 18
Run dev
Go to HTTP://localhost:3000
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

surajahmed commented 1 year ago

@cgorrieri Thanks for reporting! We'll look into this.

sahilvasuja commented 1 year ago

Hey, As of now it doesn't not compatible with React 18 in Web + NextJS but we will consider adding it in future releases.

armenavanesi commented 1 year ago

Having this issue as well

jono-allen commented 1 year ago

I had the same error when upgrading to nextjs 13.

I have opened a pr with a fix here https://github.com/GeekyAnts/NativeBase/pull/5664

mdagostino commented 1 year ago

I've figured out a workaround to use it with NextJS 13 and React 18. Just change the place where the NativeBaseProvider goes into your _app.tsx


function MyApp({ Component, pageProps }: SolitoAppProps) {
  return (
    <>
      <Head>
        <title>Example App</title>
        <meta
          name="description"
          content="Example App"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Provider>
        <NativeBaseProvider>
          <Component {...pageProps} />
        </NativeBaseProvider>
      </Provider>
    </>
  )
}

willbt commented 1 year ago

Is there any reason why the PR https://github.com/GeekyAnts/NativeBase/pull/5664 hasn't been merged?

GeekyAnts / NativeBase