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"