Verify 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:
- Run
npx next build to build the example
- Run
npx next export to export the build to static assets
- 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)
Verify canary release
Provide environment information
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
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:
npx next buildto build the examplenpx next exportto export the build to static assetsDescribe the Bug
Once the HTML is statically exported you can either run
npx http-server out/and selectopen in a new tab. The page will render fine however, if you inspect the DOM you'll notice that there is aninline scriptthat does some magic ..If you don't want to run
npx http-server out/just go to the staticindex.htmlfile in theout/directory and you should see that the script is included in the static export.It seems that this script is actually included every time we static export or just a regular
next buildrather 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)