NextTopLoader stopped working on Nextjs 14.0.3 #56

ajsystem · 2023-11-17T21:55:00Z

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 · 2023-11-18T06:08:51Z

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 · 2023-11-18T07:21:32Z

+1

jonathanwilke · 2023-11-18T07:41:38Z

Same problem for me. Downgrading to 14.0.2 fixed it.

TheSGJ · 2023-11-18T07:55:06Z

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 · 2023-11-18T10:06:07Z

same problem.

croofec · 2023-11-18T10:06:43Z

+1

sengawasenga · 2023-11-18T16:55:45Z

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

omarqra · 2023-11-19T16:17:05Z

+1

preeti-192 · 2023-11-20T04:24:04Z

import type { Metadata } from 'next';
import './globals.css';
import { ReactNode } from 'react';
import NextTopLoader from 'nextjs-toploader';
import AppWrapper from './AppWrapper';

export default function RootLayout({
  children,
}: Readonly<{
  children: ReactNode;
}>) {
  return (
    <html lang="en" className="antialiased">
      <body>
        <NextTopLoader
          color="hsl(var(--secondary-light))"
          initialPosition={0.08}
          crawlSpeed={200}
          height={3}
          crawl
          showSpinner
          easing="ease"
          speed={200}
          shadow="0 0 10px hsl(var(--secondary)),0 0 5px hsl(var(--secondary-light))"
          template='<div class="bar" role="bar"><div class="peg"></div></div> 
  <div class="spinner" style="top: 65px" role="spinner"><div class="spinner-icon"></div></div>'
          zIndex={999999}
        />
        <main>
          <AppWrapper>{children}</AppWrapper>
        </main>
      </body>
    </html>
  );
}

PedroL22 · 2023-11-20T13:34:05Z

same here

besufkadmenji · 2023-11-20T21:34:21Z

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 · 2023-11-21T08:52:54Z

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 · 2023-11-22T08:39:56Z

+1

Super-Kenil · 2023-11-23T06:17:03Z

+1

monir6163 · 2023-11-23T08:32:16Z

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 · 2023-11-23T08:35:56Z

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 · 2023-11-23T08:53:08Z

same problem here

gokulkrishh · 2023-11-23T10:14:07Z

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 · 2023-11-28T09:54:41Z

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

gustaveWPM · 2023-11-30T05:30:42Z

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 · 2023-12-01T13:38:08Z

Potentially will be fixed by vercel/next.js#58861

nunesunil · 2023-12-03T19:57:29Z

Fixed by vercel/next.js#58861 and released in v14.0.4-canary.37.

Super-Kenil · 2023-12-09T04:01:09Z

@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 · 2023-12-09T04:12:08Z

@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 · 2023-12-09T04:14:39Z

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

Super-Kenil · 2023-12-09T04:18:50Z

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

gustaveWPM · 2023-12-09T07:35:29Z

Fixed!

bschwartz10 · 2024-01-04T21:21:24Z

Still experiencing the stuck loader when its 99% done. This is happening specifically when using the custom useRouter solution from this issue: #10 (comment)

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

B33fb0n3 · 2024-01-30T16:15:17Z

Still not working :(

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

sho-pb · 2024-01-31T03:26:37Z

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 · 2024-02-08T04:36:23Z

@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 · 2024-03-19T19:29:55Z

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 · 2024-03-22T10:24:07Z

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 · 2024-05-30T12:49:51Z

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

Himture · 2024-08-05T06:21:26Z

Solution given by @sho-pb is perfect and works well and you can also do all the customization to the loader in the NextTopLoader.tsx file by adding the props there in the return.
Kudos!

Emiliano-Bucci · 2024-11-14T14:52:11Z

@sho-pb Hi! Is your solution also working with the browser back button? :)

TheSGJ added help wanted Extra attention is needed bug Something isn't working labels Nov 18, 2023

oeyoews mentioned this issue Nov 18, 2023

加载失败 oeyoews/react-music#4

Closed

2 tasks

syfxlin mentioned this issue Nov 19, 2023

Progress Bar does not end correctly syfxlin/blog#53

Closed

gokulkrishh mentioned this issue Nov 20, 2023

NextTopLoader stopped working on NextJS v14.0.3 gokulkrishh/expense.fyi#99

Closed

njbmartin mentioned this issue Nov 22, 2023

So how is this supposed to work? #57

Closed

Jings mentioned this issue Nov 23, 2023

issue nextjs version 14.0.3 not finish loader #58

Closed

Fredkiss3 mentioned this issue Nov 24, 2023

Fix/top loader Fredkiss3/gh-next#104

Merged

3 tasks

jigsaxis mentioned this issue Dec 1, 2023

Next 13 app dir support apal21/nextjs-progressbar#86

Open

jmotes mentioned this issue Jul 8, 2024

Progress Stuck Not Work when Using the useRouter hook (Client Components) #80

Closed

NextTopLoader stopped working on Nextjs 14.0.3 #56

NextTopLoader stopped working on Nextjs 14.0.3 #56

Comments

ajsystem commented Nov 17, 2023

rrojan commented Nov 18, 2023

SuhelMakkad commented Nov 18, 2023

jonathanwilke commented Nov 18, 2023

TheSGJ commented Nov 18, 2023

putramaghfirah commented Nov 18, 2023

croofec commented Nov 18, 2023

sengawasenga commented Nov 18, 2023

omarqra commented Nov 19, 2023

preeti-192 commented Nov 20, 2023 • edited Loading

PedroL22 commented Nov 20, 2023

besufkadmenji commented Nov 20, 2023 • edited Loading

Jings commented Nov 21, 2023

joshke commented Nov 22, 2023

Super-Kenil commented Nov 23, 2023

monir6163 commented Nov 23, 2023

Jings commented Nov 23, 2023

vnevermore commented Nov 23, 2023

gokulkrishh commented Nov 23, 2023

NestedGateway commented Nov 28, 2023

gustaveWPM commented Nov 30, 2023 • edited Loading

andrewmumblebee commented Dec 1, 2023 • edited Loading

nunesunil commented Dec 3, 2023

Super-Kenil commented Dec 9, 2023

mamlzy commented Dec 9, 2023

gokulkrishh commented Dec 9, 2023

Super-Kenil commented Dec 9, 2023

gustaveWPM commented Dec 9, 2023

bschwartz10 commented Jan 4, 2024 • edited Loading

B33fb0n3 commented Jan 30, 2024 • edited Loading

sho-pb commented Jan 31, 2024

Super-Kenil commented Feb 8, 2024

moon2850088 commented Mar 19, 2024

rohankm commented Mar 22, 2024

Kamleshpaul commented May 30, 2024

Himture commented Aug 5, 2024

Emiliano-Bucci commented Nov 14, 2024 • edited Loading

preeti-192 commented Nov 20, 2023 •

edited

Loading

besufkadmenji commented Nov 20, 2023 •

edited

Loading

gustaveWPM commented Nov 30, 2023 •

edited

Loading

andrewmumblebee commented Dec 1, 2023 •

edited

Loading

bschwartz10 commented Jan 4, 2024 •

edited

Loading

B33fb0n3 commented Jan 30, 2024 •

edited

Loading

Emiliano-Bucci commented Nov 14, 2024 •

edited

Loading