issues with react 18? - Githubissues

bonesoul commented 2 years ago

does the package work well with react 18? I suspect it produces some hydration errors in SSG mode.

milesj commented 2 years ago

@bonesoul I haven't worked on this in a while, so I don't really know. If you notice anything weird, feel free to report it.

bonesoul commented 2 years ago

mostly getting hydration errors with react 18

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

hilo2120 commented 2 years ago

mostly getting hydration errors with react 18

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

Yes I have the same issue with Interweave 13.0.0, react 18.2.0 and next 12.1.6

musiur commented 2 years ago

I have been working with NEXT JS which has used React18.

I used Swiper for making carousel. There was no issue but, when I open BROWSER and DEV TOOL aside then, issue appears ON REALOAD the page. Also, one of my friend has experienced the issue after installing the project in his local machine.

ISSUE:

My package.json:

{
  "name": "musiur",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "axios": "^0.27.2",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-icons": "^4.4.0",
    "swiper": "^8.2.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.16.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.14",
    "sass": "^1.52.1",
    "tailwindcss": "^3.0.24"
  }
}

So I have looked on Stackoverflow and got an answer which actually didn't solve my issue but helped me to understand the concept behind it.

See his answer on Stackoverflow

I hope this may help you to understand the reason behind this issue.

milesj commented 2 years ago

I don't really have bandwidth to look into this, but I'm assuming you all are using interweave-ssr? https://interweave.dev/docs/ssr#interweave

If anyone wants to dig into it a bit, the code is here: https://github.com/milesj/interweave/blob/master/packages/ssr/src/index.ts#L116

jameswahome commented 2 years ago

following the instructions here helped https://interweave.dev/docs/ssr#interweave

bonesoul commented 2 years ago

also fixed the issue for me thanks.

milesj / interweave

issues with react 18? #232