NextJS 12.3.x doesn't remove FOUC style (body hidden)

[OnkelTem]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #56-Ubuntu SMP Tue Sep 20 13:23:26 UTC 2022
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 12.3.2-canary.29
      eslint-config-next: 12.3.1
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

NextJS in dev mode adds this markup to the html head:

<style data-next-hide-fouc="true">body{display:none}</style>
<noscript data-next-hide-fouc="true">
  <style>body{display:block}</style>
</noscript>

As a result the page is not displayed.

Expected Behavior

It should remove this FOUC protection, or what is its name.

Link to reproduction

https://github.com/OnkelTem/demo-styled-jsx

To Reproduce

To reproduce with the referenced repository:

$ npm run dev

OR to reproduce from scratch:

$ npx create-next-app@latest --ts demo-styled-jsx
$ cd demo-styled-jsx
$ npm run dev

THEN open the page in your browser.

[awareness481]

Can reproduce, getting the following error in the console

Uncaught ReferenceError: exports is not defined
    at eval (react-refresh-runtime.development.js?7e84:645:1)
    at eval (react-refresh-runtime.development.js?7e84:657:3)
    at ./node_modules/next/dist/compiled/react-refresh/cjs/react-refresh-runtime.development.js (react-refresh.js?ts=1666001933146:41:1)
    at options.factory (webpack.js?ts=1666001933146:667:31)
    at __webpack_require__ (webpack.js?ts=1666001933146:37:33)
    at fn (webpack.js?ts=1666001933146:322:21)
    at eval (runtime.js?9c6e:6:3)
    at ./node_modules/next/dist/compiled/react-refresh/runtime.js (react-refresh.js?ts=1666001933146:52:1)
    at options.factory (webpack.js?ts=1666001933146:667:31)
    at __webpack_require__ (webpack.js?ts=1666001933146:37:33)

[OnkelTem]

I noticed that what triggers this error is the project directory name. The pattern is: /styed-jsx$/ f.e.:

styled-jsx/
foobar-styled-jsx/

Maybe this fact should be added to the report title.

[balazsorban44]

This seems to have been introduced in #40679

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.