Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add script to script loader when strategy prop is undefined #65585

Merged
merged 7 commits into from
May 15, 2024
3 changes: 3 additions & 0 deletions packages/next/src/pages/_document.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -989,6 +989,9 @@ function handleDocumentScriptLoaderItems(
) {
scriptLoaderItems.push(child.props)
return
} else if (typeof child.props.strategy === 'undefined') {
scriptLoaderItems.push({ ...child.props, strategy: 'afterInteractive' })
return
}
}
})
Expand Down
119 changes: 119 additions & 0 deletions test/e2e/next-script/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,125 @@ describe('beforeInteractive in document body', () => {
}
})
})

describe('empty strategy in document Head', () => {
let next: NextInstance

beforeAll(async () => {
next = await createNext({
files: {
'pages/_document.js': `
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
return (
<Html>
<Head>
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
></Script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
`,
'pages/index.js': `
export default function Home() {
return (
<>
<p>Home page</p>
</>
)
}
`,
},
dependencies: {
react: '19.0.0-beta-4508873393-20240430',
'react-dom': '19.0.0-beta-4508873393-20240430',
},
})
})
afterAll(() => next.destroy())

it('Script is injected server-side', async () => {
let browser: BrowserInterface

try {
browser = await webdriver(next.url, '/')

const script = await browser.eval(
`document.querySelector('script[data-nscript="afterInteractive"]')`
)
expect(script).not.toBeNull()
} finally {
if (browser) await browser.close()
}
})
})

describe('empty strategy in document body', () => {
let next: NextInstance

beforeAll(async () => {
next = await createNext({
files: {
'pages/_document.js': `
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
return (
<Html>
<Head/>
<body>
<Main />
<NextScript />
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
/>
</body>
</Html>
)
}
`,
'pages/index.js': `
export default function Home() {
return (
<>
<p>Home page</p>
</>
)
}
`,
},
dependencies: {
react: '19.0.0-beta-4508873393-20240430',
'react-dom': '19.0.0-beta-4508873393-20240430',
},
})
})
afterAll(() => next.destroy())

it('Script is injected server-side', async () => {
let browser: BrowserInterface

try {
browser = await webdriver(next.url, '/')

const script = await browser.eval(
`document.querySelector('script[data-nscript="afterInteractive"]')`
)
expect(script).not.toBeNull()
} finally {
if (browser) await browser.close()
}
})
})
;(process.env.TURBOPACK ? describe.skip : describe)(
'experimental.nextScriptWorkers',
() => {
Expand Down
Loading