Next.js Compatibility Issues on Chrome 80: Style, useEffect, and Query Problems

[dStormTrooper]

Link to the code that reproduces this issue

https://github.com/dStormTrooper/my-test-app

To Reproduce

Bug Report

Title
next.js Compatibility Issues with Chrome 80: useEffect Hook and Query Not Working

Description
When running my next.js project on Chrome 80, I noticed compatibility issues with styles. Additionally, the useEffect hook and query functionalities are not working as expected.

Steps to Reproduce

1. Open next.js project in Chrome 80.
2. Observe the styling errors and abnormal behavior of useEffect.
3. Attempt to use the query functionality, which also fails to operate properly.
   Expected Behavior
   The page should display styles correctly, and both useEffect hook and query functionalities should work seamlessly.

Current vs. Expected behavior

Current Behavior

I am encountering several issues in my Next.js application when using Chrome version 80. Firstly, the application's styling is not loading as expected, resulting in a disorganized layout. Secondly, when I attempt to use the useEffect hook for data fetching, it seems that it is not being invoked since I see no data or state updates. Lastly, despite having appropriate query parameters in the routing, they seem inaccessible within page components via the useRouter hook.

I have tried refreshing the page and clearing the cache, but these issues persist. In other versions of Chrome and different browsers, these problems are not occurring.

Expected Behavior

My expectation is that in all supported browser versions, including Chrome 80, the Next.js application should load and render styles correctly, the useEffect hook should be invoked upon component mounting to perform data fetching operations. Additionally, the useRouter hook should be able to access route query parameters, allowing me to use them within page components.

In previous versions, these functionalities were working as expected, which leads me to believe there is either a compatibility issue or a bug with the latest version of Next.js.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #29~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Apr  4 14:39:20 UTC 2
  Available memory (MB): 59968
  Available CPU cores: 16
Binaries:
  Node: 18.20.2
  npm: 10.5.0
  Yarn: N/A
  pnpm: 8.15.5
Relevant Packages:
  next: 14.2.1 // There is a newer version (14.2.3) available, upgrade recommended! 
  eslint-config-next: 14.2.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[jin-benben]

1