Skip to content

NextJS13 dynamic components injects <script> tag in the DOM causing weird markup and CSP errors even when using next export #45099

Description

@hsheikhali1

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:08:47 PST 2022; root:xnu-8792.61.2~4/RELEASE_X86_64
Binaries:
  Node: 19.3.0
  npm: 9.2.0
  Yarn: N/A
  pnpm: 7.5.1
Relevant packages:
  next: 13.1.2
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

warn - Latest canary version not detected, detected: "13.1.2", newest: "13.1.4-canary.0".
Please try the latest canary version (npm install next@canary) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issue

This is the env details on stackblitz

     Platform: linux
     Arch: x64
     Version: Ubuntu 20.04.0 LTS Fri Jan 20 2023 11:05:41 GMT-0500 (Eastern Standard Time)
   Binaries:
     Node: 16.14.2
     npm: 7.17.0
     Yarn: 1.22.19
     pnpm: 7.13.6
   Relevant packages:
     next: 13.1.4-canary.0
     eslint-config-next: N/A
     react: 18.2.0
     react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Static HTML Export (next export)

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-mlc4hg?file=pages%2Findex.tsx,components%2Fexample.tsx

To Reproduce

Steps to reproduce:

  1. Run npx next build to build the example
  2. Run npx next export to export the build to static assets
  3. Observe the static HTML output.

Describe the Bug

Once the HTML is statically exported you can either run npx http-server out/ and select open in a new tab. The page will render fine however, if you inspect the DOM you'll notice that there is an inline script that does some magic ..

If you don't want to run npx http-server out/ just go to the static index.html file in the out/ directory and you should see that the script is included in the static export.

<script>
function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}};$RC("B:0","S:0")
</script>

It seems that this script is actually included every time we static export or just a regular next build rather than generating the appropriate HTML at build time. Now the icing on the cake here is, we currently have "script-src self"setup so this script is always blocked.. The result is a blank page with a sea of red in the browser console. This completely blocks us from upgrading to any version greater than next 13.0.0.

Expected Behavior

This does not happen in NextJS 13.0.0. I would assume the intended behaviour here is that at build time all the required HTML is built on the server and the HTML is generated therefore there is no need for an inline script to inject parts of HTML when its required.. At least this is what I assume used to happen in next 13.0.0. I think it also may have something to do with React 18 and server components.

Which browser are you using? (if relevant)

This is reproducible on every browser.

How are you deploying your application? (if relevant)

next export to Netlify, and S3 (Amazon)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue was opened via the bug report template.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions