diff --git a/errors/manifest.json b/errors/manifest.json index d0260def43712..9c52478cbf19d 100644 --- a/errors/manifest.json +++ b/errors/manifest.json @@ -279,6 +279,10 @@ "title": "no-document-viewport-meta", "path": "/errors/no-document-viewport-meta.md" }, + { + "title": "no-duplicate-head", + "path": "/errors/no-duplicate-head.md" + }, { "title": "no-head-import-in-document", "path": "/errors/no-head-import-in-document.md" diff --git a/errors/no-duplicate-head.md b/errors/no-duplicate-head.md new file mode 100644 index 0000000000000..ed16c4f102b0d --- /dev/null +++ b/errors/no-duplicate-head.md @@ -0,0 +1,38 @@ +# No Duplicate Head + +### Why This Error Occurred + +More than a single instance of the `` component was used in a single custom document. This can cause unexpected behavior in your application. + +### Possible Ways to Fix It + +Only use a single `` component in your custom document in `pages/_document.js`. + +```jsx +// pages/_document.js +import Document, { Html, Head, Main, NextScript } from 'next/document' + +class MyDocument extends Document { + static async getInitialProps(ctx) { + //... + } + + render() { + return ( + + + +
+ + + + ) + } +} + +export default MyDocument +``` + +### Useful Links + +- [Custom Document](https://nextjs.org/docs/advanced-features/custom-document) diff --git a/packages/eslint-plugin-next/lib/index.js b/packages/eslint-plugin-next/lib/index.js index 1e3d0659a8b26..d9a7911da3365 100644 --- a/packages/eslint-plugin-next/lib/index.js +++ b/packages/eslint-plugin-next/lib/index.js @@ -12,6 +12,7 @@ module.exports = { 'link-passhref': require('./rules/link-passhref'), 'no-document-import-in-page': require('./rules/no-document-import-in-page'), 'no-head-import-in-document': require('./rules/no-head-import-in-document'), + 'no-duplicate-head': require('./rules/no-duplicate-head'), }, configs: { recommended: { @@ -29,6 +30,7 @@ module.exports = { '@next/next/link-passhref': 1, '@next/next/no-document-import-in-page': 2, '@next/next/no-head-import-in-document': 2, + '@next/next/no-duplicate-head': 2, }, }, }, diff --git a/packages/eslint-plugin-next/lib/rules/no-duplicate-head.js b/packages/eslint-plugin-next/lib/rules/no-duplicate-head.js new file mode 100644 index 0000000000000..3a2df1205c63c --- /dev/null +++ b/packages/eslint-plugin-next/lib/rules/no-duplicate-head.js @@ -0,0 +1,55 @@ +module.exports = { + meta: { + docs: { + description: 'Enforce no duplicate usage of in pages/document.js', + recommended: true, + }, + }, + create: function (context) { + let documentImportName + return { + ImportDeclaration(node) { + if (node.source.value === 'next/document') { + const documentImport = node.specifiers.find( + ({ type }) => type === 'ImportDefaultSpecifier' + ) + if (documentImport && documentImport.local) { + documentImportName = documentImport.local.name + } + } + }, + ReturnStatement(node) { + const ancestors = context.getAncestors() + const documentClass = ancestors.find( + (ancestorNode) => + ancestorNode.type === 'ClassDeclaration' && + ancestorNode.superClass && + ancestorNode.superClass.name === documentImportName + ) + + if (!documentClass) { + return + } + + if (node.argument && node.argument.children) { + const headComponents = node.argument.children.filter( + (childrenNode) => + childrenNode.openingElement && + childrenNode.openingElement.name && + childrenNode.openingElement.name.name === 'Head' + ) + + if (headComponents.length > 1) { + for (let i = 1; i < headComponents.length; i++) { + context.report({ + node: headComponents[i], + message: + 'Do not include multiple instances of . See: https://nextjs.org/docs/messages/no-duplicate-head', + }) + } + } + } + }, + } + }, +} diff --git a/test/eslint-plugin-next/no-duplicate-head.test.js b/test/eslint-plugin-next/no-duplicate-head.test.js new file mode 100644 index 0000000000000..579865966cba8 --- /dev/null +++ b/test/eslint-plugin-next/no-duplicate-head.test.js @@ -0,0 +1,142 @@ +const rule = require('@next/eslint-plugin-next/lib/rules/no-duplicate-head') + +const RuleTester = require('eslint').RuleTester + +RuleTester.setDefaultConfig({ + parserOptions: { + ecmaVersion: 2018, + sourceType: 'module', + ecmaFeatures: { + modules: true, + jsx: true, + }, + }, +}) + +var ruleTester = new RuleTester() +ruleTester.run('no-duplicate-head', rule, { + valid: [ + { + code: `import Document, { Html, Head, Main, NextScript } from 'next/document' + + class MyDocument extends Document { + static async getInitialProps(ctx) { + //... + } + + render() { + return ( + + + + ) + } + } + + export default MyDocument + `, + filename: 'pages/_document.js', + }, + { + code: `import Document, { Html, Head, Main, NextScript } from 'next/document' + + class MyDocument extends Document { + render() { + return ( + + + + + + + ) + } + } + + export default MyDocument + `, + filename: 'pages/_document.tsx', + }, + ], + invalid: [ + { + code: ` + import Document, { Html, Main, NextScript } from 'next/document' + import Head from 'next/head' + + class MyDocument extends Document { + render() { + return ( + + + + + + ) + } + } + + export default MyDocument + `, + filename: 'pages/_document.js', + errors: [ + { + message: + 'Do not include multiple instances of . See: https://nextjs.org/docs/messages/no-duplicate-head', + type: 'JSXElement', + }, + { + message: + 'Do not include multiple instances of . See: https://nextjs.org/docs/messages/no-duplicate-head', + type: 'JSXElement', + }, + ], + }, + { + code: ` + import Document, { Html, Main, NextScript } from 'next/document' + import Head from 'next/head' + + class MyDocument extends Document { + render() { + return ( + + + + + + +
+ + + +