Next NProgress doesn't seem to exist

[Nick]

Using the custom app as follows:

import NextNProgress from 'nextjs-progressbar';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextNProgress />
      <Component {...pageProps} />;
    </>
  );
}

NextNProgress doesn't seem to be loading at all - I've tried surrounding it with

tags and there was nothing between that, although I don't know if that's intentional. Any help would be appreciated. Thanks!

[Apal Shah]

Can you create a sample repo on Github which reproduces this error?

[Nick]

I was firstly wondering if my syntax is correct? That is the relevant section of code. Where should the progress bar be added to the DOM so I can see if it's in the complied HTML please?

[Apal Shah]

I would highly recommend you to share the minimal repo to reproduce this error so that I can understand what is the error. Because the code seems to be correct. There can be hundreds of other issues which I cannot know without seeing the code.

Till then you can also check this out if you want to make your own progressbar component:
https://gosink.in/next-js-make-your-own-progress-bar-indicator-component-easily/

[Nick]

Before I produce a repo, does this help narrow down the issue? I've found that it exists in the components section of the React DevTools yet hovering over it seems to suggest it just isn't being rendered?

[Nick]

Clicking to inspect 'b' doesn't work because it doesn't exist in the DOM unlike other elements such as 'test'

[Nick]

I have some good(?) but extremely unhelpful news. I would not be joking if I said it randomly stopped working. I don't know why this can possibly be as I had already restarted my app before making this issue etc. and that did not fix it but it has just begun working. Thank you very much for your quick response and this amazingly helpful library.

[Apal Shah]

Thanks a lot, @NicholasG04 for the kind words and I'm glad that this package helped you.