From 9b22dc4660e4b60e56f4a2558f9d1c780ddd087f Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 12 Sep 2020 14:57:07 -0400 Subject: [PATCH 1/3] Improve custom document error message (#17048) --- packages/next/next-server/server/render.tsx | 19 ++++++++++--------- .../test/index.test.js | 10 +++++----- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx index d5733179ad526..df2be19398304 100644 --- a/packages/next/next-server/server/render.tsx +++ b/packages/next/next-server/server/render.tsx @@ -2,6 +2,7 @@ import { IncomingMessage, ServerResponse } from 'http' import { ParsedUrlQuery } from 'querystring' import React from 'react' import { renderToStaticMarkup, renderToString } from 'react-dom/server' +import { warn } from '../../build/output/log' import { UnwrapPromise } from '../../lib/coalesced-function' import { GSP_NO_RETURNED_VALUE, @@ -19,9 +20,9 @@ import { isInAmpMode } from '../lib/amp' import { AmpStateContext } from '../lib/amp-context' import { AMP_RENDER_TARGET, + PERMANENT_REDIRECT_STATUS, SERVER_PROPS_ID, STATIC_PROPS_ID, - PERMANENT_REDIRECT_STATUS, TEMPORARY_REDIRECT_STATUS, } from '../lib/constants' import { defaultHead } from '../lib/head' @@ -37,13 +38,13 @@ import { AppType, ComponentsEnhancer, DocumentInitialProps, + DocumentProps, DocumentType, getDisplayName, isResSent, loadGetInitialProps, NextComponentType, RenderPage, - DocumentProps, } from '../lib/utils' import { tryGetPreviewData, __ApiPreviewProps } from './api-utils' import { denormalizePagePath } from './denormalize-page-path' @@ -906,13 +907,13 @@ export async function renderToHTML( const plural = nonRenderedComponents.length !== 1 ? 's' : '' if (nonRenderedComponents.length) { - console.warn( - `Expected Document Component${plural} ${nonRenderedComponents.join( - ', ' - )} ${ - plural ? 'were' : 'was' - } not rendered. Make sure you render them in your custom \`_document\`\n` + - `See more info here https://err.sh/next.js/missing-document-component` + const missingComponentList = nonRenderedComponents + .map((e) => `<${e} />`) + .join(', ') + warn( + `Your custom Document (pages/_document) did not render all the required subcomponent${plural}.\n` + + `Missing component${plural}: ${missingComponentList}\n` + + 'Read how to fix here: https://err.sh/next.js/missing-document-component' ) } } diff --git a/test/integration/missing-document-component-error/test/index.test.js b/test/integration/missing-document-component-error/test/index.test.js index 5502a0f628d6d..11a635cf26a41 100644 --- a/test/integration/missing-document-component-error/test/index.test.js +++ b/test/integration/missing-document-component-error/test/index.test.js @@ -40,7 +40,7 @@ const checkMissing = async (missing = [], docContent) => { describe('Missing _document components error', () => { it('should detect missing Html component', async () => { await checkMissing( - ['Html'], + [''], ` import Document, { Head, Main, NextScript } from 'next/document' @@ -65,7 +65,7 @@ describe('Missing _document components error', () => { it('should detect missing Head component', async () => { await checkMissing( - ['Head'], + [''], ` import Document, { Html, Main, NextScript } from 'next/document' @@ -89,7 +89,7 @@ describe('Missing _document components error', () => { it('should detect missing Main component', async () => { await checkMissing( - ['Main'], + ['
'], ` import Document, { Html, Head, NextScript } from 'next/document' @@ -113,7 +113,7 @@ describe('Missing _document components error', () => { it('should detect missing NextScript component', async () => { await checkMissing( - ['NextScript'], + [''], ` import Document, { Html, Head, Main } from 'next/document' @@ -136,7 +136,7 @@ describe('Missing _document components error', () => { it('should detect multiple missing document components', async () => { await checkMissing( - ['Head', 'NextScript'], + ['', ''], ` import Document, { Html, Main } from 'next/document' From 0f41062db0bb1341c76bc9190415d27de6625e64 Mon Sep 17 00:00:00 2001 From: Fran Zekan Date: Sun, 13 Sep 2020 15:06:29 +0200 Subject: [PATCH 2/3] Examples blogs: fix spelling (#17049) Throughout some of the blog examples word `formatter` is spelled as `formater`, this PR changes all of them to `formatter` --- .../components/{date-formater.tsx => date-formatter.tsx} | 4 ++-- examples/blog-starter-typescript/components/hero-post.tsx | 4 ++-- examples/blog-starter-typescript/components/post-header.tsx | 4 ++-- examples/blog-starter-typescript/components/post-preview.tsx | 4 ++-- .../components/{date-formater.js => date-formatter.js} | 2 +- examples/blog-starter/components/hero-post.js | 4 ++-- examples/blog-starter/components/post-header.js | 4 ++-- examples/blog-starter/components/post-preview.js | 4 ++-- examples/cms-kontent/components/date-formater.js | 2 +- examples/cms-kontent/components/hero-post.js | 4 ++-- examples/cms-kontent/components/post-header.js | 4 ++-- examples/cms-kontent/components/post-preview.js | 4 ++-- 12 files changed, 22 insertions(+), 22 deletions(-) rename examples/blog-starter-typescript/components/{date-formater.tsx => date-formatter.tsx} (71%) rename examples/blog-starter/components/{date-formater.js => date-formatter.js} (73%) diff --git a/examples/blog-starter-typescript/components/date-formater.tsx b/examples/blog-starter-typescript/components/date-formatter.tsx similarity index 71% rename from examples/blog-starter-typescript/components/date-formater.tsx rename to examples/blog-starter-typescript/components/date-formatter.tsx index 720b7bd50189a..e827be5e9c84d 100644 --- a/examples/blog-starter-typescript/components/date-formater.tsx +++ b/examples/blog-starter-typescript/components/date-formatter.tsx @@ -4,9 +4,9 @@ type Props = { dateString: string } -const DateFormater = ({ dateString }: Props) => { +const DateFormatter = ({ dateString }: Props) => { const date = parseISO(dateString) return } -export default DateFormater +export default DateFormatter diff --git a/examples/blog-starter-typescript/components/hero-post.tsx b/examples/blog-starter-typescript/components/hero-post.tsx index 8d769b4b7a3fb..5bd84f9bbe0d3 100644 --- a/examples/blog-starter-typescript/components/hero-post.tsx +++ b/examples/blog-starter-typescript/components/hero-post.tsx @@ -1,5 +1,5 @@ import Avatar from './avatar' -import DateFormater from './date-formater' +import DateFormatter from './date-formatter' import CoverImage from './cover-image' import Link from 'next/link' import Author from '../types/author' @@ -34,7 +34,7 @@ const HeroPost = ({
- +
diff --git a/examples/blog-starter-typescript/components/post-header.tsx b/examples/blog-starter-typescript/components/post-header.tsx index d91161ad0cd52..5e9d616aebf00 100644 --- a/examples/blog-starter-typescript/components/post-header.tsx +++ b/examples/blog-starter-typescript/components/post-header.tsx @@ -1,5 +1,5 @@ import Avatar from './avatar' -import DateFormater from './date-formater' +import DateFormatter from './date-formatter' import CoverImage from './cover-image' import PostTitle from './post-title' import Author from '../types/author' @@ -26,7 +26,7 @@ const PostHeader = ({ title, coverImage, date, author }: Props) => {
- +
diff --git a/examples/blog-starter-typescript/components/post-preview.tsx b/examples/blog-starter-typescript/components/post-preview.tsx index 1f3ad8643347e..6a02d9a6940ab 100644 --- a/examples/blog-starter-typescript/components/post-preview.tsx +++ b/examples/blog-starter-typescript/components/post-preview.tsx @@ -1,5 +1,5 @@ import Avatar from './avatar' -import DateFormater from './date-formater' +import DateFormatter from './date-formatter' import CoverImage from './cover-image' import Link from 'next/link' import Author from '../types/author' @@ -32,7 +32,7 @@ const PostPreview = ({
- +

{excerpt}

diff --git a/examples/blog-starter/components/date-formater.js b/examples/blog-starter/components/date-formatter.js similarity index 73% rename from examples/blog-starter/components/date-formater.js rename to examples/blog-starter/components/date-formatter.js index b346c94cab03f..9de4f4880011d 100644 --- a/examples/blog-starter/components/date-formater.js +++ b/examples/blog-starter/components/date-formatter.js @@ -1,6 +1,6 @@ import { parseISO, format } from 'date-fns' -export default function DateFormater({ dateString }) { +export default function DateFormatter({ dateString }) { const date = parseISO(dateString) return } diff --git a/examples/blog-starter/components/hero-post.js b/examples/blog-starter/components/hero-post.js index 68f7cb984ad03..cfedfb874fe41 100644 --- a/examples/blog-starter/components/hero-post.js +++ b/examples/blog-starter/components/hero-post.js @@ -1,5 +1,5 @@ import Avatar from '../components/avatar' -import DateFormater from '../components/date-formater' +import DateFormatter from '../components/date-formatter' import CoverImage from '../components/cover-image' import Link from 'next/link' @@ -24,7 +24,7 @@ export default function HeroPost({
- +
diff --git a/examples/blog-starter/components/post-header.js b/examples/blog-starter/components/post-header.js index 299600d6bcd2a..d1cfc20f44991 100644 --- a/examples/blog-starter/components/post-header.js +++ b/examples/blog-starter/components/post-header.js @@ -1,5 +1,5 @@ import Avatar from '../components/avatar' -import DateFormater from '../components/date-formater' +import DateFormatter from '../components/date-formatter' import CoverImage from '../components/cover-image' import PostTitle from '../components/post-title' @@ -18,7 +18,7 @@ export default function PostHeader({ title, coverImage, date, author }) {
- +
diff --git a/examples/blog-starter/components/post-preview.js b/examples/blog-starter/components/post-preview.js index ac8c8b98a5628..fd067f4f868fe 100644 --- a/examples/blog-starter/components/post-preview.js +++ b/examples/blog-starter/components/post-preview.js @@ -1,5 +1,5 @@ import Avatar from '../components/avatar' -import DateFormater from '../components/date-formater' +import DateFormatter from '../components/date-formatter' import CoverImage from './cover-image' import Link from 'next/link' @@ -22,7 +22,7 @@ export default function PostPreview({
- +

{excerpt}

diff --git a/examples/cms-kontent/components/date-formater.js b/examples/cms-kontent/components/date-formater.js index b346c94cab03f..9de4f4880011d 100644 --- a/examples/cms-kontent/components/date-formater.js +++ b/examples/cms-kontent/components/date-formater.js @@ -1,6 +1,6 @@ import { parseISO, format } from 'date-fns' -export default function DateFormater({ dateString }) { +export default function DateFormatter({ dateString }) { const date = parseISO(dateString) return } diff --git a/examples/cms-kontent/components/hero-post.js b/examples/cms-kontent/components/hero-post.js index 68f7cb984ad03..cfedfb874fe41 100644 --- a/examples/cms-kontent/components/hero-post.js +++ b/examples/cms-kontent/components/hero-post.js @@ -1,5 +1,5 @@ import Avatar from '../components/avatar' -import DateFormater from '../components/date-formater' +import DateFormatter from '../components/date-formatter' import CoverImage from '../components/cover-image' import Link from 'next/link' @@ -24,7 +24,7 @@ export default function HeroPost({
- +
diff --git a/examples/cms-kontent/components/post-header.js b/examples/cms-kontent/components/post-header.js index 4a832420cbd27..583e2e33a630f 100644 --- a/examples/cms-kontent/components/post-header.js +++ b/examples/cms-kontent/components/post-header.js @@ -1,5 +1,5 @@ import Avatar from '../components/avatar' -import DateFormater from '../components/date-formater' +import DateFormatter from '../components/date-formatter' import CoverImage from '../components/cover-image' import PostTitle from '../components/post-title' @@ -18,7 +18,7 @@ export default function PostHeader({ title, coverImage, date, author }) {
- +
diff --git a/examples/cms-kontent/components/post-preview.js b/examples/cms-kontent/components/post-preview.js index ac8c8b98a5628..fd067f4f868fe 100644 --- a/examples/cms-kontent/components/post-preview.js +++ b/examples/cms-kontent/components/post-preview.js @@ -1,5 +1,5 @@ import Avatar from '../components/avatar' -import DateFormater from '../components/date-formater' +import DateFormatter from '../components/date-formatter' import CoverImage from './cover-image' import Link from 'next/link' @@ -22,7 +22,7 @@ export default function PostPreview({
- +

{excerpt}

From 9959d7ef32bb74ec9467df86c598d0a365942d48 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Sun, 13 Sep 2020 16:29:23 +0300 Subject: [PATCH 3/3] Use babel 7 jsx syntax (#17043) For some reason babel-plugin-syntax-jsx of babel 6 was used instead of babel 7 version. --- packages/next/build/babel/plugins/jsx-pragma.ts | 3 ++- packages/next/package.json | 2 +- packages/next/types/misc.d.ts | 1 + yarn.lock | 8 +------- 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/next/build/babel/plugins/jsx-pragma.ts b/packages/next/build/babel/plugins/jsx-pragma.ts index cd09b76c17518..52dd2af24e8e3 100644 --- a/packages/next/build/babel/plugins/jsx-pragma.ts +++ b/packages/next/build/babel/plugins/jsx-pragma.ts @@ -1,4 +1,5 @@ import { NodePath, PluginObj, types as BabelTypes } from '@babel/core' +import jsx from '@babel/plugin-syntax-jsx' export default function ({ types: t, @@ -6,7 +7,7 @@ export default function ({ types: typeof BabelTypes }): PluginObj { return { - inherits: require('babel-plugin-syntax-jsx'), + inherits: jsx, visitor: { JSXElement(_path, state) { state.set('jsx', true) diff --git a/packages/next/package.json b/packages/next/package.json index 9acfb60570261..03595d4878739 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -67,6 +67,7 @@ "@babel/plugin-proposal-object-rest-spread": "7.11.0", "@babel/plugin-syntax-bigint": "7.8.3", "@babel/plugin-syntax-dynamic-import": "7.8.3", + "@babel/plugin-syntax-jsx": "7.10.4", "@babel/plugin-transform-modules-commonjs": "7.10.4", "@babel/plugin-transform-runtime": "7.11.5", "@babel/preset-env": "7.11.5", @@ -78,7 +79,6 @@ "@next/react-dev-overlay": "9.5.4-canary.14", "@next/react-refresh-utils": "9.5.4-canary.14", "ast-types": "0.13.2", - "babel-plugin-syntax-jsx": "6.18.0", "babel-plugin-transform-define": "2.0.0", "babel-plugin-transform-react-remove-prop-types": "0.4.24", "browserslist": "4.13.0", diff --git a/packages/next/types/misc.d.ts b/packages/next/types/misc.d.ts index cbc1f67ef95ae..5b0a9f066d66c 100644 --- a/packages/next/types/misc.d.ts +++ b/packages/next/types/misc.d.ts @@ -1,5 +1,6 @@ /* eslint-disable import/no-extraneous-dependencies */ declare module '@babel/plugin-transform-modules-commonjs' +declare module '@babel/plugin-syntax-jsx' declare module 'browserslist' declare module 'cssnano-simple' { import { Plugin } from 'postcss' diff --git a/yarn.lock b/yarn.lock index 457d6ac60f80a..ef39521971cc6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -766,19 +766,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.8.0" -"@babel/plugin-syntax-jsx@^7.10.4": +"@babel/plugin-syntax-jsx@7.10.4", "@babel/plugin-syntax-jsx@^7.10.4", "@babel/plugin-syntax-jsx@^7.2.0": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c" integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g== dependencies: "@babel/helper-plugin-utils" "^7.10.4" -"@babel/plugin-syntax-jsx@^7.2.0": - version "7.7.4" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.7.4.tgz#dab2b56a36fb6c3c222a1fbc71f7bf97f327a9ec" - dependencies: - "@babel/helper-plugin-utils" "^7.0.0" - "@babel/plugin-syntax-logical-assignment-operators@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"