fisshy / react-scroll

React scroll component
https://github.com/fisshy/react-scroll/blob/master/README.md
MIT License
4.35k stars 436 forks source link

It is not compatible with the latest Next.js. #555

Closed KangXinzhi closed 7 months ago

KangXinzhi commented 1 year ago

image

image

alvis commented 1 year ago

Also confirm it doesn't work with next@13.4.4 and react-scroll@1.8.9. Same error related to an undefined super expression. :(

datvnn commented 1 year ago

I got the same error, it disappeared after installing smoothscroll-polyfill. "next": "^13.4.1", "react-scroll": "^1.8.9", "smoothscroll-polyfill": "^0.4.4",

KangXinzhi commented 1 year ago

I got the same error, it disappeared after installing smoothscroll-polyfill. "next": "^13.4.1", "react-scroll": "^1.8.9", "smoothscroll-polyfill": "^0.4.4",

hi, I have tried to solve this problem by adding the following code at the top of the page where you use react-scrolluse client,like this:

'use client'
import React from 'react'
import Link from 'next/link'
import { Link as ScrollLink } from 'react-scroll'

function App() {
  return (
    <div>
      xxx
    </div>
  )
}

export default App
KangXinzhi commented 1 year ago

Also confirm it doesn't work with next@13.4.4 and react-scroll@1.8.9. Same error related to an undefined super expression. :(

I have tried to solve this problem

morgnism commented 1 year ago

Can confirm adding 'use client' to the component using react-scroll will fix this issue.

Ciscoo91 commented 1 year ago

I also confirm that adding 'use client' solved the problem 👍

intuity-hans commented 1 year ago

your solutions suggest that you are using the app router. is this also present when using the pages directory?

Ciscoo91 commented 1 year ago

I haven't tried using the pages directory, but based on the Next.js documentation, pages in the app directory are server components by default, while pages in the pages folder are client components by default. Therefore, I believe you don't need to use 'use client' in the components when using the pages folder. You can find this information in the Next.js documentation.

Furthermore, the documentation also explains why some third-party packages need to be in client components. You can read more about it here.

xiaojiudev commented 1 year ago

Is there any other similar library support for Nextjs13?

leandroruel commented 12 months ago

Is there any other similar library support for Nextjs13?

as the previous replies said, all pages/components in Next 13 are by default server components, you have to set "use client" at the top of your component/page.

i also tried search by a different lib but no success =/

samullman commented 7 months ago

Geez this new next js causing everything to break lol