search

1000ship / react-scroll-motion

🎞 Easy to make scroll animation
https://1000ship.github.io/react-scroll-motion
MIT License
422 stars 47 forks source link

Hi, I think it is not working in Next.js 13 app routing version #46

Closed nidevelop closed 6 months ago

nidevelop commented 1 year ago

I know it works in Next.js pages router project. I checked the example code and I saw it works!

But I tryed many times in Next.js 13 verson, app router project, it doesn't work at all.

The error says like this, Even it doesn't work with only the ScrollContainer.

Or did I worng? I import that code in directory '(root)/app/page.js'

Pls show update the new example on Next.js 13 app routing version.

Or let me know how can I use it in Next.js 13 app routing.

ps. it works when I change the page CSR with code 'use client' on top. That means this module is not working on SSR 😥 ps2. I tried to import all the components as dynamic import too. It didn't work 😥

error : Unhandled Runtime Error Error: (0 , react_1.createContext) is not a function

1000ship commented 9 months ago

Hi, first of all, thank you for using my module :)

I know the updates of NextJS v13+, and I've utilized with that version also. For my react-scroll-motion module, the root (ScrollContainer) components needs to use Javascript for handling children-components' styles. So it must be CSR mode, it means by 'use client' must be set.

By the way, you don't have to make your page as the CSR mode. So, I just updated my code by adding "use client" on the <ScrollContainer/> component, which is the root component of my module.

Can you reinstall with react-scroll-motion@0.3.3 and try it again?

Sorry for checking it lately. If you're still addressing this issue, I hope you doing well ;)

1000ship commented 6 months ago

Here's example with NextJS v14 https://github.com/1000ship/nextjs-14-react-scroll-motion