NextTopLoader stopped working on Nextjs 14.0.3

ajsystem commented 8 months ago

Hello, just to report that on a project with the last Nextjs 14.0.3, the toploader keeps loading and never finish or completes.

But there aren't errors on console server/client.

As a workaround to get it working install 14.0.2

rrojan commented 8 months ago

Same here. the progress bar is stuck at the end and never finishes loading since NextJS 14.0.3.

It also looks less snappy, if that makes sense. At the time where it previously completed loading, it now goes to around at 60-70% progress and slowly crawls its way to the end, but doesn't stop loading.

SuhelMakkad commented 8 months ago

+1

jonathanwilke commented 8 months ago

Same problem for me. Downgrading to 14.0.2 fixed it.

TheSGJ commented 8 months ago

Next js 14.0.3 added experimental support for history.pushState and history.replaceState. That's why it's messing with history.pushState() method in the code. Here's the pr which introduced it: vercel/next.js/pull/58335

putramaghfirah commented 8 months ago

same problem.

croofec commented 8 months ago

+1

sengawasenga commented 8 months ago

I got the same problem, how can we solve it ?

omarqra commented 7 months ago

+1

preeti-192 commented 7 months ago

same issue.

PedroL22 commented 7 months ago

same here

besufkadmenji commented 7 months ago

Possible fix: run NProgress.done() inside your top level client component, this will cleanup any stuck loader

import * as NProgress from "nprogress";

useEffect(() => {
    NProgress.done();
}, [pathname, router]);

Jings commented 7 months ago

Possible fix: run NProgress.done() inside your top level client component, this will cleanup any stuck loader
import * as NProgress from "nprogress";

useEffect(() => {
    NProgress.done();
}, [pathname, router]);

This works for now. Hopefully the proper fix will come soon :)

joshke commented 7 months ago

+1

Super-Kenil commented 7 months ago

+1

monir6163 commented 7 months ago

Possible fix: run NProgress.done() inside your top level client component, this will cleanup any stuck loader
import * as NProgress from "nprogress";

useEffect(() => {
    NProgress.done();
}, [pathname, router]);

why root layout client-side rendering? I hope it is not good practiche

Jings commented 7 months ago

Possible fix: run NProgress.done() inside your top level client component, this will cleanup any stuck loader
import * as NProgress from "nprogress";

useEffect(() => {
    NProgress.done();
}, [pathname, router]);
why root layout client-side rendering? I hope it is not good practiche

@besufkadmenji is only talking about your top most client component not root layout client side rendering. If this is your root layout, fine. For me it is not but instead two or three pages that are the top most client components.

vnevermore commented 7 months ago

same problem here

gokulkrishh commented 7 months ago

Possible fix: run NProgress.done() inside your top level client component, this will cleanup any stuck loader
import * as NProgress from "nprogress";

useEffect(() => {
    NProgress.done();
}, [pathname, router]);

Yep this worked for me. But we need proper fix. Thanks for suggesting.

NestedGateway commented 7 months ago

Also facing problem with nextjs 14. I am still using it because there is no such alternative to it. All other all manual.

gustaveWPM commented 7 months ago

Possible fix: run NProgress.done() inside your top level client component, this will cleanup any stuck loader
import * as NProgress from "nprogress";

useEffect(() => {
    NProgress.done();
}, [pathname, router]);

Thank you so much! I added it at the top of my <Providers> component.

My root layout looks like this:

<html lang={language} dir={dir}>
  <body>
    <div>
      <Providers locale={language}>
        <NextTopLoader {...} />
        {children}
// ...

So that's a really good workaround, imo.

andrewmumblebee commented 7 months ago

Potentially will be fixed by https://github.com/vercel/next.js/pull/58861

nunesunil commented 7 months ago

Fixed by https://github.com/vercel/next.js/pull/58861 and released in v14.0.4-canary.37.

Super-Kenil commented 7 months ago

@ajsystem , I checked the latest Nextjs v14.0.4. and nextjs-toploader works fine in that version. I think this issues should be closed now

mamlzy commented 7 months ago

@ajsystem , I checked the latest Nextjs v14.0.4. and nextjs-toploader works fine in that version. I think this issues should be closed now

let see what other people opinions first, just to make sure before it's closed😉

gokulkrishh commented 7 months ago

@ImamAlfariziSyahputra @Super-Kenil Yep issue is fixed in v14.0.4 for my app expense.fyi

Super-Kenil commented 7 months ago

@ImamAlfariziSyahputra . I had already tested it in 3 of my projects, then I commented here. @gokulkrishh thanks for confirming

gustaveWPM commented 7 months ago

Fixed!

bschwartz10 commented 6 months ago

Still experiencing the stuck loader when its 99% done. This is happening specifically when using the custom useRouter solution from this issue: https://github.com/TheSGJ/nextjs-toploader/issues/10#issuecomment-1809417610

"next": "^14.0.4"
"nextjs-toploader": "^1.6.4"
"nprogress": "^0.2.0"

B33fb0n3 commented 5 months ago

Still not working :(

"next": "14.1.0",
"nextjs-toploader": "^1.6.4",

sho-pb commented 5 months ago

my solutions

// NextTopLoader.tsx
'use client';

import Loader from 'nextjs-toploader';
import { usePathname } from 'next/navigation';

const NextTopLoader = () => {
  const pathname = usePathname();

  useEffect(() => {
    NProgress.done();
  }, [pathname]);

  return (
    <Loader />
  )
}

// useRouter.ts
import { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';
import { useRouter as useNextRouter, usePathname } from 'next/navigation';
import { useCallback } from 'react';
import NProgress from 'nprogress';

export const useRouter = () => {
  const router = useNextRouter();
  const pathname = usePathname();

  const replace = useCallback(
    (href: string, options?: NavigateOptions) => {
      href !== pathname && NProgress.start();
      router.replace(href, options);
    },
    [router, pathname],
  );

  const push = useCallback(
    (href: string, options?: NavigateOptions) => {
      href !== pathname && NProgress.start();
      router.push(href, options);
    },
    [router, pathname],
  );

  return {
    ...router,
    replace,
    push,
  };
};

Super-Kenil commented 5 months ago

@B33fb0n3

Still not working :(

"next": "14.1.0",
"nextjs-toploader": "^1.6.4",

I am using nextjs-toploader, With same version you're using, Both Next and nextjs-toploader and it seems to be working perfectly on my end.

For fixing it, make sure you are not using it multiple times unnecessarily in your App. If it doesn't get fixed, please create a Reproduction so that we could take a look at it

moon2850088 commented 3 months ago

my solutions

// NextTopLoader.tsx
'use client';

import Loader from 'nextjs-toploader';
import { usePathname } from 'next/navigation';

const NextTopLoader = () => {
  const pathname = usePathname();

  useEffect(() => {
    NProgress.done();
  }, [pathname]);

  return (
    <Loader />
  )
}

// useRouter.ts
import { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';
import { useRouter as useNextRouter, usePathname } from 'next/navigation';
import { useCallback } from 'react';
import NProgress from 'nprogress';

export const useRouter = () => {
  const router = useNextRouter();
  const pathname = usePathname();

  const replace = useCallback(
    (href: string, options?: NavigateOptions) => {
      href !== pathname && NProgress.start();
      router.replace(href, options);
    },
    [router, pathname],
  );

  const push = useCallback(
    (href: string, options?: NavigateOptions) => {
      href !== pathname && NProgress.start();
      router.push(href, options);
    },
    [router, pathname],
  );

  return {
    ...router,
    replace,
    push,
  };
};

It works for me. Thanks for your solution !

rohankm commented 3 months ago

my solutions

// NextTopLoader.tsx
'use client';

import Loader from 'nextjs-toploader';
import { usePathname } from 'next/navigation';

const NextTopLoader = () => {
  const pathname = usePathname();

  useEffect(() => {
    NProgress.done();
  }, [pathname]);

  return (
    <Loader />
  )
}

// useRouter.ts
import { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';
import { useRouter as useNextRouter, usePathname } from 'next/navigation';
import { useCallback } from 'react';
import NProgress from 'nprogress';

export const useRouter = () => {
  const router = useNextRouter();
  const pathname = usePathname();

  const replace = useCallback(
    (href: string, options?: NavigateOptions) => {
      href !== pathname && NProgress.start();
      router.replace(href, options);
    },
    [router, pathname],
  );

  const push = useCallback(
    (href: string, options?: NavigateOptions) => {
      href !== pathname && NProgress.start();
      router.push(href, options);
    },
    [router, pathname],
  );

  return {
    ...router,
    replace,
    push,
  };
};

this works for the latest nextjs

Kamleshpaul commented 1 month ago

my solutions

// NextTopLoader.tsx
'use client';

import Loader from 'nextjs-toploader';
import { usePathname } from 'next/navigation';

const NextTopLoader = () => {
  const pathname = usePathname();

  useEffect(() => {
    NProgress.done();
  }, [pathname]);

  return (
    <Loader />
  )
}

// useRouter.ts
import { NavigateOptions } from 'next/dist/shared/lib/app-router-context.shared-runtime';
import { useRouter as useNextRouter, usePathname } from 'next/navigation';
import { useCallback } from 'react';
import NProgress from 'nprogress';

export const useRouter = () => {
  const router = useNextRouter();
  const pathname = usePathname();

  const replace = useCallback(
    (href: string, options?: NavigateOptions) => {
      href !== pathname && NProgress.start();
      router.replace(href, options);
    },
    [router, pathname],
  );

  const push = useCallback(
    (href: string, options?: NavigateOptions) => {
      href !== pathname && NProgress.start();
      router.push(href, options);
    },
    [router, pathname],
  );

  return {
    ...router,
    replace,
    push,
  };
};

this works

TheSGJ / nextjs-toploader

NextTopLoader stopped working on Nextjs 14.0.3 #56