apal21 / nextjs-progressbar

A simple Next.js progressbar component using NProgress.
https://www.npmjs.com/package/nextjs-progressbar
MIT License
776 stars 61 forks source link

Expected server HTML to contain a matching <style> in <div>. #73

Closed DavidIlie closed 2 years ago

DavidIlie commented 2 years ago

image

imranbarbhuiya commented 2 years ago

Can you please run Node.js with the --enable-source-maps option? You can either define it by doing node --enable-source-maps . or by setting the NODE_OPTIONS environment variable with it as a value.

Without source maps, it's hard to determine what is the code that is erroring.

DavidIlie commented 2 years ago

I can't seem to enable that for Next.js:

NODE_OPTIONS=--enable-source-maps yarn dev

This is what I am trying and the error looks the same.

imranbarbhuiya commented 2 years ago

Ignore my last comment. I forgot I'm talking about nextjs sorry. But in nextjs development environment, by default sourcemap is enabled. So probably u r using an old version of nextjs-progressbar and older versions don't provide sourcemap. Can u try upgrading it?

DavidIlie commented 2 years ago

I am running the latest version of Next.js

image

imranbarbhuiya commented 2 years ago

I am running the latest version of Next.js

image

Not next I mean nextjs-progressbar

DavidIlie commented 2 years ago

image

I am currently running nextjs-progressbar not nextjs-nprogressbar is there a difference with that?

imranbarbhuiya commented 2 years ago

No sorry typo. If u r using 0.0.14, you should get the sourcemap.

Now

  1. Can u run yarn why nextjs-progressbar
  2. Can u provide a minimal repro so I can test this out.
sgehrman commented 2 years ago

same problem. I just switched from nprogress hoping you fixed it. That code has the same bug.

imranbarbhuiya commented 2 years ago

same problem. I just switched from nprogress hoping you fixed it. That code has the same bug.

Can you provide a minimal code sample which is causing the issue? I'm not able to reproduce the issue. That said can u check these 2 issues and solutions seems like your issue is related to these issues https://github.com/vercel/next.js/issues/8998 https://github.com/vercel/next.js/issues/25489

sgehrman commented 2 years ago

as far as I know, I have a typical nextjs typescript project with tailwind. Are you looking in the Browser's console for the warning?

sgehrman commented 2 years ago

Hey, I figured it out.

We hired this hipster coder and he added this hack to our code.

I removed the isServer check and it worked. I think this was needed for nextjs back in the day?

const App = () => {
      if (isServer) 
          return null;

   return <App></App>
}

const isServer = () => typeof window === 'undefined';
imranbarbhuiya commented 2 years ago

Closing this issue. If anyone else has this issue please follow up with a minimal reproducible code sample.