React 18 not working !

[ahmadzreqat]

Bug Report

Current Behavior
A clear and concise description of the behavior.

Reproducible demo
Link to GitHub repository or codesandbox with a demo of the bug behavior.

Expected behavior/code
A clear and concise description of what you expected to happen (or code).

Possible Solution

Additional context/Screenshots
Add any other context about the problem here. If applicable, add screenshots to help explain.

[ahmadzreqat]

not working with react dom v: 18

[jason-hwang]

Hi guys, Is there any updates for React 18?

[WillSmithTE]

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

[loganknecht]

Encountering the same issue with this. 😭

[Nayem55]

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

[Abhishek1350]

@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!

[Nayem55]

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

[Rafaelceid]

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

[moretime-dev]

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>
  )
}

[bird-cage]

I'm doing this, but it is still not working, see error below:

Using "react-dom": "~18.2.0", "react-router": "~6.22.0", and createBrowserRouter

import React from "react";
import { createRoot, hydrateRoot } from "react-dom/client";
import { App } from "@/components";

const rootElement = document.getElementById("app") as HTMLElement;

if (rootElement.hasChildNodes()) {
    hydrateRoot(
        rootElement,
        <React.StrictMode>
            <App />
        </React.StrictMode>,
    );
} else {
    createRoot(document.getElementById("app")!).render(
        <React.StrictMode>
            <App />
        </React.StrictMode>,
    );
}

ERROR

webpack 5.90.3 compiled successfully in 10248 ms
🔥  pageerror at /: SyntaxError: Unexpected token '.'

✅  crawled 1 out of 1 (/)

error An unexpected error occurred: "Command failed.

Any Ideas