Next.js Discord

Discord Forum

NPM package working in src/ and app/ dir, but not in page/

Unanswered
Giant panda posted this in #help-forum
Open in Discord
Giant pandaOP
I've created a js library that makes the scroll wheel smooth like the scroll of the touchpad or the touch screens, it works in a vanilla js project, but when It comes to nextjs, there are a lot of issue with it with the page dir, I had an old project ( almost a 6-month long ) and when I tried to use the library with, it failed, unlike using it in a fresh react project using either src/ or app/, if someone can help me by taking a look at the code and see if there is anything that can be adjusted to work with react, or help me to create a react version for this library.
here is the library: https://github.com/hossammenem/silky-smooth-scrolling
and you can simply run npm install silky-smooth-scroll to install the library and test it in your project.

You can also play around with the code immediately in this pen: https://codepen.io/hossammenem/pen/VwVrpQJ

I want to address some of the issues that I had while trying to use it in a react project.

first, I wasn't able to use import ... form ..., I had to change it to require, I don't rembmer the error excatly, but I think it was something like import cannot be used outside of a moudle file

second, I have a function that requestAnimationFrame, it tries to access the window, and it's an IIFE function, so whenever I call the main function, it gets called even before it ( tested this one out by wrapping the scroll ( default exported function from the library ) in an if statement to check for the window to see if it's undefined ot not, and yet I still got the same error.

last, even after trying to find some workarounds for those issues, the animationFrame always remained weird.

0 Replies