TypeError: Cannot read properties of null (reading 'textContent')

[pipech]

Description

Getting TypeError: Cannot read properties of null (reading 'textContent') error after consecutive reloading.

This error originate from this code JSON.parse(document.getElementById('__NEXT_DATA__').textContent) in node_modules/next/dist/client/index.js

May be it's something to do with async await on _document file.

If I remove csp related from _document file it'll work just fine.

Screenshot

Step to reproduce

1. Goes to https://next-safe-middleware.vercel.app/
2. Open developer console
3. Press F5(Refresh) 3 times (It not limited to refresh 3 times, sometime after consecutive loading we'll get this error but refresh 3 times is the most reliable way to reproduce this.
4. You will get TypeError: Cannot read properties of null (reading 'textContent') error
5. From here javascript won't work

[Msmldavies]

I am having the same problem with my next app but only on Edge.
I can only repeat @pipech https://next-safe-middleware.vercel.app/ failure on Edge as well so I think its a browser specific issue.
Its not on every load but most loads.

Due to this failure its failing to run any useEffects on any components so the whole site fails.

I remove CSP in the _document it goes away too.

Any one got any ideas on this one yet?

[Msmldavies]

I created a simple project to replicate this issue you can find here:
https://github.com/Msmldavies/next-csp-example-app

It seems you need CSP plus something significant to render so I've added a bunch of SVG icons to home page to replicate it.

• Follow readme to build and run locally (you need an optimized build, not a dev build)
• reload multiple times on Edge browser (only fails on Edge)
• Sometimes you will error:
  
• Occasionally it will load correctly and give you log message:
  

[Morozzzko]

This issue seems to be Chromium-specific. It reproduces 90%+ of time when I emulate slow connection (50 kbps). Firefox works fine

It's somehow related to the way scripts are being loaded

[akagire]

Now I hit this issue.

I can reproduce following procedure.

1. Do Hard reload with chrome dev tool turn off.
2. Open Chrome dev tool.
3. Do soft reload, and I can get this issue.

FYI, When I tired turn off React dev tool extension, this issue is gone in my environment.

But some my colleague cannot reproduce this issue, I'm struggling...

[Rohukas]

Did anyone find a fix for this?