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

[debashisqba]

HTMLElement

Hi @moretime-dev: Can you please mention where to add this code? When I added this script in src/index.js, it's showing error for HTMLElement .

[debashisqba]

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

Hi, were you able to fix it to make it working? If so, can you please provide the details?

[bird-cage]

Hi debashisqba,
No. I suspect it is because I have a local setup with apache virtualHost and ssh that proxy's the localHost to a dev domain.
I tried hacking a local fork of react-snap to debug without success.
For the moment I have put it aside, to keep working on the app. But will get back to it when I have time.

[ProdigyView]

Here is how I got mine working, and I build it with Docker.

1. Head over to @Amani007 for at https://github.com/amanix007/react-snap
2. Notice the two files that have recently updated, the package.json and puppet utils.
3. In my project, I created a folder called scripts and placed the package.josn and puppet utils in there.
4. In my Docker build BEFORE the npm build is ran, I do this:

# Copy the custom puppeteer_utils.js
COPY ./scripts/puppeteer_utils.js ./node_modules/react-snap/src/puppeteer_utils.js
COPY ./scripts/package.json ./node_modules/react-snap/package.json

# Build the React application
RUN npm run build

This replaces what is the react-snaps folder with my verions in the scripts folder. And it now compiles.