Merge branch 'canary' into clean-up-scripts

examples/blog-starter-typescript/components/date-formater.tsx → 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 <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
 }
 
-export default DateFormater
+export default DateFormatter

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 = ({
             </Link>
           </h3>
           <div className="mb-4 md:mb-0 text-lg">
-            <DateFormater dateString={date} />
+            <DateFormatter dateString={date} />
           </div>
         </div>
         <div>

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) => {
           <Avatar name={author.name} picture={author.picture} />
         </div>
         <div className="mb-6 text-lg">
-          <DateFormater dateString={date} />
+          <DateFormatter dateString={date} />
         </div>
       </div>
     </>

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 = ({
         </Link>
       </h3>
       <div className="text-lg mb-4">
-        <DateFormater dateString={date} />
+        <DateFormatter dateString={date} />
       </div>
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture} />

examples/blog-starter/components/date-formater.js → 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 <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
 }

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({
             </Link>
           </h3>
           <div className="mb-4 md:mb-0 text-lg">
-            <DateFormater dateString={date} />
+            <DateFormatter dateString={date} />
           </div>
         </div>
         <div>

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 }) {
           <Avatar name={author.name} picture={author.picture} />
         </div>
         <div className="mb-6 text-lg">
-          <DateFormater dateString={date} />
+          <DateFormatter dateString={date} />
         </div>
       </div>
     </>

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({
         </Link>
       </h3>
       <div className="text-lg mb-4">
-        <DateFormater dateString={date} />
+        <DateFormatter dateString={date} />
       </div>
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture} />

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 <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
 }

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({
             </Link>
           </h3>
           <div className="mb-4 md:mb-0 text-lg">
-            <DateFormater dateString={date} />
+            <DateFormatter dateString={date} />
           </div>
         </div>
         <div>

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 }) {
           <Avatar name={author.name} picture={author.picture} />
         </div>
         <div className="mb-6 text-lg">
-          <DateFormater dateString={date} />
+          <DateFormatter dateString={date} />
         </div>
       </div>
     </>

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({
         </Link>
       </h3>
       <div className="text-lg mb-4">
-        <DateFormater dateString={date} />
+        <DateFormatter dateString={date} />
       </div>
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture} />

packages/next/build/babel/plugins/jsx-pragma.ts

@@ -1,12 +1,13 @@
 import { NodePath, PluginObj, types as BabelTypes } from '@babel/core'
+import jsx from '@babel/plugin-syntax-jsx'
 
 export default function ({
   types: t,
 }: {
   types: typeof BabelTypes
 }): PluginObj<any> {
   return {
-    inherits: require('babel-plugin-syntax-jsx'),
+    inherits: jsx,
     visitor: {
       JSXElement(_path, state) {
         state.set('jsx', true)

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'
       )
     }
   }

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",

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'

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'],
+      ['<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'],
+      ['<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'],
+      ['<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'],
+      ['<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'],
+      ['<Head />', '<NextScript />'],
       `
       import Document, { Html, Main } from 'next/document'
 

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"