61ea8efe42
This commit adds a development mode warning in the console if you try to include <script> tags in next/head, e.g. ``` <Head> <script async src="..." /> </Head> ``` The warning message explains that this pattern will not work well with Suspense/streaming and recommends using the next/script component instead. TODO in follow-up PR: add same warning for stylesheets, etc ## Feature - [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [x] Integration tests added - [x] Documentation added - [x] Errors have helpful link attached, see `contributing.md`
52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
module.exports = {
|
|
meta: {
|
|
docs: {
|
|
description: 'Disallow using next/script inside the next/head component',
|
|
recommended: true,
|
|
url: 'https://nextjs.org/docs/messages/no-script-component-in-head-component',
|
|
},
|
|
},
|
|
create: function (context) {
|
|
let isNextHead = null
|
|
|
|
return {
|
|
ImportDeclaration(node) {
|
|
if (node.source.value === 'next/head') {
|
|
isNextHead = node.source.value
|
|
}
|
|
|
|
if (node.source.value !== 'next/script') {
|
|
return
|
|
}
|
|
},
|
|
JSXElement(node) {
|
|
if (!isNextHead) {
|
|
return
|
|
}
|
|
|
|
if (
|
|
node.openingElement &&
|
|
node.openingElement.name &&
|
|
node.openingElement.name.name !== 'Head'
|
|
) {
|
|
return
|
|
}
|
|
|
|
const scriptTag = node.children.find(
|
|
(child) =>
|
|
child.openingElement &&
|
|
child.openingElement.name &&
|
|
child.openingElement.name.name === 'Script'
|
|
)
|
|
|
|
if (scriptTag) {
|
|
context.report({
|
|
node,
|
|
message:
|
|
"next/script shouldn't be used inside next/head. See: https://nextjs.org/docs/messages/no-script-component-in-head-component",
|
|
})
|
|
}
|
|
},
|
|
}
|
|
},
|
|
}
|