From 9f336ee8ec88f8dcb956d9e06cf21441cde7ad53 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Sat, 19 Mar 2022 10:52:15 -0500 Subject: [PATCH 1/3] Update next/link error when no children are provided --- errors/link-no-children.md | 35 +++++++++++++++++++ packages/next/client/link.tsx | 5 +++ .../client-navigation/pages/link-no-child.js | 10 ++++++ .../client-navigation/test/index.test.js | 8 +++++ 4 files changed, 58 insertions(+) create mode 100644 errors/link-no-children.md create mode 100644 test/integration/client-navigation/pages/link-no-child.js diff --git a/errors/link-no-children.md b/errors/link-no-children.md new file mode 100644 index 000000000000..103018f1f80e --- /dev/null +++ b/errors/link-no-children.md @@ -0,0 +1,35 @@ +# No children were passed to + +#### Why This Error Occurred + +In your application code `next/link` was used without passing a child: + +For example: + +```js +import Link from 'next/link' + +export default function Home() { + return ( + + // or + + ) +} +``` + +#### Possible Ways to Fix It + +Make sure one child is used when using ``: + +```js +import Link from 'next/link' + +export default function Home() { + return ( + + To About + + ) +} +``` diff --git a/packages/next/client/link.tsx b/packages/next/client/link.tsx index 9bb634d251ad..98856261e77c 100644 --- a/packages/next/client/link.tsx +++ b/packages/next/client/link.tsx @@ -231,6 +231,11 @@ function Link(props: React.PropsWithChildren) { try { child = React.Children.only(children) } catch (err) { + if (!children) { + throw new Error( + `No children were pass to with \`href\` of \`${props.href}\` but one child is required https://nextjs.org/docs/messages/link-no-children` + ) + } throw new Error( `Multiple children were passed to with \`href\` of \`${props.href}\` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children` + (typeof window !== 'undefined' diff --git a/test/integration/client-navigation/pages/link-no-child.js b/test/integration/client-navigation/pages/link-no-child.js new file mode 100644 index 000000000000..e3786f932ee7 --- /dev/null +++ b/test/integration/client-navigation/pages/link-no-child.js @@ -0,0 +1,10 @@ +import React from 'react' +import Link from 'next/link' + +export default function Page() { + return ( +
+ Hello World. +
+ ) +} diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js index 2414ac400a1a..92c5fbc66b22 100644 --- a/test/integration/client-navigation/test/index.test.js +++ b/test/integration/client-navigation/test/index.test.js @@ -60,6 +60,14 @@ describe('Client Navigation', () => { await browser.close() }) + it('should have proper error when no children are provided', async () => { + const browser = await webdriver(context.appPort, '/link-no-child') + expect(await hasRedbox(browser, true)).toBe(true) + expect(await getRedboxHeader(browser)).toContain( + 'No children were pass to with `href` of `/about` but one child is required' + ) + }) + it('should navigate back after reload', async () => { const browser = await webdriver(context.appPort, '/nav') await browser.elementByCss('#about-link').click() From 2c6a856dfa416456819f1d1a4205c89cf6bfbed7 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Sat, 19 Mar 2022 11:01:43 -0500 Subject: [PATCH 2/3] update manifest --- errors/manifest.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/errors/manifest.json b/errors/manifest.json index d80ef5787008..ae234227e647 100644 --- a/errors/manifest.json +++ b/errors/manifest.json @@ -514,6 +514,10 @@ "title": "future-webpack5-moved-to-webpack5", "path": "/errors/future-webpack5-moved-to-webpack5.md" }, + { + "title": "link-no-children", + "path": "/errors/link-no-children.md" + }, { "title": "link-multiple-children", "path": "/errors/link-multiple-children.md" From aa29a3c7915debe107443e9d2aec9b53d75e8026 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Sat, 19 Mar 2022 22:58:11 -0500 Subject: [PATCH 3/3] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Balázs Orbán --- packages/next/client/link.tsx | 2 +- test/integration/client-navigation/test/index.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/next/client/link.tsx b/packages/next/client/link.tsx index 98856261e77c..379d21123e15 100644 --- a/packages/next/client/link.tsx +++ b/packages/next/client/link.tsx @@ -233,7 +233,7 @@ function Link(props: React.PropsWithChildren) { } catch (err) { if (!children) { throw new Error( - `No children were pass to with \`href\` of \`${props.href}\` but one child is required https://nextjs.org/docs/messages/link-no-children` + `No children were passed to with \`href\` of \`${props.href}\` but one child is required https://nextjs.org/docs/messages/link-no-children` ) } throw new Error( diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js index 92c5fbc66b22..b0fc4128bf95 100644 --- a/test/integration/client-navigation/test/index.test.js +++ b/test/integration/client-navigation/test/index.test.js @@ -64,7 +64,7 @@ describe('Client Navigation', () => { const browser = await webdriver(context.appPort, '/link-no-child') expect(await hasRedbox(browser, true)).toBe(true) expect(await getRedboxHeader(browser)).toContain( - 'No children were pass to with `href` of `/about` but one child is required' + 'No children were passed to with `href` of `/about` but one child is required' ) })