search

nibtime / next-safe-middleware

Strict CSP (Content-Security-Policy) for Next.js hybrid apps https://web.dev/strict-csp/
https://next-safe-middleware.vercel.app
MIT License
78 stars 20 forks source link

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

Open pipech opened 1 year ago

pipech commented 1 year ago

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

image

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 commented 1 year ago

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 commented 1 year ago

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.

Morozzzko commented 1 year ago

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 commented 1 year ago

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 commented 11 months ago

Did anyone find a fix for this?