Issues when using together with Next.js

LotharVM commented 3 years ago

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 commented 3 years ago

Hi @LotharVM, v2 fixed having to import or access the library with .default. You should just need to import via require("@ashthornton/asscroll"). Let me know if that fixes your issue.

LotharVM commented 3 years ago

@ashthornton if I remove the .default, it's returning TypeError: Cannot read property 'setAttribute' of null

ashthornton commented 3 years ago

@LotharVM I've seen that issue when there is no [asscroll-container] element on the page, or if you've updated that option then it will need to match what you've passed through.

The default HTML is:

<body>
    <div asscroll-container>
        <div><!-- The Y translation will be applied to this element --></div>
    </div>
</body>

Do you have the container element on your page?

LotharVM commented 3 years ago

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

LotharVM commented 3 years ago

One other question though: Do you think that my approach in useEffect, so updating the page height after the routeChangeComplete event is the correct way of doing it? I couldn't get it to work any other way

darkristy commented 3 years ago

By any chance how are you wrapping the container in ._app.js because I keep getting this error "null is not an object (evaluating 'this.containerElement.setAttribute')"

ashthornton commented 3 years ago

One other question though: Do you think that my approach in useEffect, so updating the page height after the routeChangeComplete event is the correct way of doing it? I couldn't get it to work any other way

I'm not familiar with Next.js but the concept would follow this timeline normally:

Navigate away
Disable ASScroll (asscroll.disable())
Load next page + assets (images/videos etc.)
Enable ASScroll (asscroll.enable({ newScrollElements: newPageElement }))

This is if the actual page element that was scrolling had changed on navigation, which may not be the case for you. In which case then yes, calling asscroll.resize() after your page has updated and assets have loaded is a good approach.

tingyuzeng commented 3 years ago

@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!

tingyuzeng commented 3 years ago

@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.

ashthornton commented 3 years ago

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

tingyuzeng commented 3 years ago

@ashthornton Thanks! What a relief!

darkristy commented 3 years ago

Say you have paginated list, how do you resize the page when the list container height changes

ashthornton commented 3 years ago

asscroll.resize()

On Mon, Jul 19, 2021 at 9:36 AM Kahlil Whitfield @.***> wrote:

Say you have paginated list, how do you resize the page when the list container height changes

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ashthornton/asscroll/issues/58#issuecomment-882359390, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGX3MRL67YOKXNSUJDH6SZ3TYPPZRANCNFSM446XHT5A .

darkristy commented 3 years ago

Thanks man, i figured it out. I have to say this library has saved me alot of headache. 👍

ashthornton / asscroll

Issues when using together with Next.js #58