How to control the order of `Script beforeInteractive`?
Open
Nobody has claimed this yet.
bug
Script (next/script)
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.5k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Verify canary release
- [ ] I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Mac Monteray 12.3
Binaries:
Node: 14.19.1
npm: 6.14.16
Relevant packages:
next: 12.2.5
eslint-config-next: 12.2.5
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)
next dev
Describe the Bug
<Script beforeInteractive src> and <Script beforeInteractive dangerouslySetInnerHTML> are not rendered the same order as they are in source code.
Inline Script will always be moved top.
// _document.jsx
<Head />
<body>
<Main />
<NextScript />
<Script id="id-1" strategy="beforeInteractive" src="https://example.js" />
<Script id="id-2" strategy="beforeInteractive" dangerouslySetInnerHTML={{ __html: `console.log(example)`}} />
<Script id="id-3" strategy="beforeInteractive" src="https://example.js" />
<Script id="id-4" strategy="beforeInteractive" dangerouslySetInnerHTML={{ __html: `console.log(example)`}} />
</body>
will be rendered to:
// index.html
<head>
<script id="id-2"><script>
<script id="id-4"><script>
<noscript data-n-css=""></noscript>
<script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=166"></script>
<script id="id-1" src="https://example.js" defer="" data-nscript="beforeInteractive"></script>
<script id="id-3" src="https://example.js" defer="" data-nscript="beforeInteractive"></script>
<script src="/_next/static/chunks/webpack.js?ts=166" defer=""></script>
</head>
Expected Behavior
Keep the order in source code as:
<script id="id-1">
<script id="id-2">
<script id="id-3">
<script id="id-4">
Link to reproduction
if necessary
To Reproduce
if necessary
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the _document.jsx example and reproduce the output using next dev on the reported Next.js 12.2.5 setup. Trace how beforeInteractive scripts with src and dangerouslySetInnerHTML are rendered, then verify that the generated index.html preserves their source order for id-1 through id-4.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100