Issues when using together with Next.js

After trying several ways of using asscroll v2, I still haven’t found a way to successfully use it in Next.js. In versions prior to v2, this worked:

// _app.js

useEffect(() => {
  const ASScroll = require("@ashthornton/asscroll").default;
  const sc = new ASScroll();
  sc.enable();

  const handleRouteChange = () => {
    setTimeout(() => {
      sc.onResize(window.innerWidth, window.innerHeight);
    }, 500);
  };

  router.events.on("routeChangeComplete", handleRouteChange);
}, []);

(The onResize was needed to calculate the new page height)

After upgrading to v2, though, I keep getting the TypeError: ASScroll is not a constructor error. I also tried to import it at the top (native and via next/dynamic), but then Webpack throws a ReferenceError: self is not defined error.

Any help is appreciated!

Thanks in advance 😃

[ashthornton]

Hi @tienuur , this must be a quirk with Nextjs and custom attributes. Glad you found a solution!

[tingyuzeng]

@ashthornton it works now! I was still using the old parameter names, that’s why it couldn’t find the container element. Thanks!

Hi LotharVM, would you mind sharing a demo? I tried to work with asscroll in Nextjs as well. I cannot make it work… I tried your method, and made sure I require the package without default. There is a [asscroll-container] attribute in the JSX as well. But it keeps giving me TypeError: Cannot read property 'setAttribute' of null.

//_app.js

function MyApp({ Component, pageProps }) {

  useEffect(() => {
    const ASScroll = require("@ashthornton/asscroll");
    const asc = new ASScroll();
    asc.enable();
  }, []);

  return (
    <>
      <div asscroll-container>
        <div>
          <Component {...pageProps} />
        </div>
      </div>
    </>
  );
}

export default MyApp;

Thank you in advance!

I found a solution: I have to explicitly state asscroll-container="true" to make it work.