next-safe-middleware icon indicating copy to clipboard operation
next-safe-middleware copied to clipboard

Published 20 hours ago • verified publisher icon nibtime

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

Open pipech opened this issue 2 years ago • 5 comments

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

pipech avatar Dec 15 '22 13:12 pipech

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 avatar Mar 10 '23 13:03 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: Screenshot 2023-03-10 at 13 56 54
  • Occasionally it will load correctly and give you log message: Screenshot 2023-03-10 at 13 59 06

Msmldavies avatar Mar 10 '23 13:03 Msmldavies

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

Morozzzko avatar May 24 '23 18:05 Morozzzko

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...

akagire avatar Jul 28 '23 03:07 akagire

Did anyone find a fix for this?

Rohukas avatar Oct 03 '23 20:10 Rohukas