React 18 not working ! about react-snap HOT 10 OPEN

not working with react dom v: 18

from react-snap.

It will work with react 18 use the following in index.js/main.js :

For me it was the problem with ReactDOM.createRoot so i replaced it with hydrate and render.
Note : By using this method your app will behave like react 17. In React 18, render was replaced by createRoot. Using render in React 18 will warn that your app will behave as if it’s running React 17. Learn more here..

Here is my package.json :

from react-snap.

Hi guys, Is there any updates for React 18?

from react-snap.

Aww sad to hear, I was about to try it out. Did you ever find a workaround or alternative?

from react-snap.

Encountering the same issue with this. 😭

from react-snap.

Aww sad to hear, I was about to try it out. Did you ever find a workaround or alternative?

#573 (comment)

from react-snap.

@Abhishek1350 Thank you . It works but the styles are broken . Do you have any solution for that?

from react-snap.

@Nayem55 Not sure about the broken styles, But you can try these steps.

1. Try hosting you app in different platforms like vercel and netlify ( these are free ) and see if the issue is still there.
2. If you are using an CDN then try to revalidate it's cache.
3. Try this
   Ref : https://github.com/stereobooster/react-snap#readme
   

Also when you deploy your app, check the page content by clicking on "view page source" in the browser. And see if you are getting the expected page content.

Apply these steps one by one and let me know what works!

from react-snap.

Okk .. I'll try this and let you know

from react-snap.

Hello Guys,, do we have any news about any update of this library? is it still compatimple with react 18?

from react-snap.

Hey guys, just had the same problem. Looking at the React 18 API Docu, I solved it like this and it works. Hope it helps.

const rootElement = document.getElementById('root') as HTMLElement

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)

const queryClient = new QueryClient()

if (rootElement.hasChildNodes()) {
  ReactDOM.hydrateRoot(
    rootElement,
    <BrowserRouter>
      <Auth>
        <React.StrictMode>
          <QueryClientProvider client={queryClient}>
            <App />
          </QueryClientProvider>
        </React.StrictMode>
      </Auth>
    </BrowserRouter>
  )
} else {
  root.render(
     <BrowserRouter>
      <Auth>
        <React.StrictMode>
          <QueryClientProvider client={queryClient}>
            <App />
          </QueryClientProvider>
        </React.StrictMode>
      </Auth>
    </BrowserRouter>
  )
}

from react-snap.