I made a nextjs app that I am trying to deploy to Vercel, however when the project builds it throws errors to some of the pages:

Error: React.Children.only expected to receive a single React element child.
at Object.only (/vercel/path0/devsite/node_modules/react/cjs/react.production.min.js:19:357)
at LinkComponent (/vercel/path0/devsite/.next/server/chunks/664.js:427:45)
at Wc (/vercel/path0/devsite/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
at Zc (/vercel/path0/devsite/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:73:362)
at Z (/vercel/path0/devsite/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
at $c (/vercel/path0/devsite/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
at bd (/vercel/path0/devsite/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
at Z (/vercel/path0/devsite/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
at $c (/vercel/path0/devsite/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
at Zc (/vercel/path0/devsite/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)

None of my pages have more than one child element and everything is handled in the tsx file of each respective page (no components). My code can be found here. The entire log can be found here. Any help is appreciated.

CodePudding user response：

You have to put your element on a fragment like that in link tag on index.tsx

<Link
  href="/about"
  className={styles. Card}
 >
  <>
   <h2>About Us &rarr;</h2>
   <p>Learn about us and our services.</p>
  </>
</Link>

Hopefully it will solve your problem.