Error `Objects are not valid as a React child (found: object with keys...` with `swcMinify: true`

[martinfrancois]

What version of Next.js are you using?

v12.0.3 and v12.0.4-canary.4

What version of Node.js are you using?

v16.3.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next build && next start

Describe the Bug

With swcMinify: false in next.config.js:

When running next build && next start or next dev , after opening http://localhost:3000/ in the browser, everything works fine and is rendered correctly, there are no errors in the console.

With swcMinify: true in next.config.js:

• After running next dev and opening http://localhost:3000/ in the browser everything is still working fine
• However running next build && next start, after opening http://localhost:3000/ in the browser instead of the rendered page you see: Application error: a client-side exception has occurred (see the browser console for more information)., with the following error in the console. When decoded, it results in the following errors:

Objects are not valid as a React child (found: object with keys {Qr, RV, cI, Gc}). If you meant to render a collection of children, use an array instead.
Objects are not valid as a React child (found: object with keys {passive}). If you meant to render a collection of children, use an array instead.

Expected Behavior

Having swcMinify: true in next.config.js should result in the same page being rendered after running next build && next start as when having swcMinify: false in next.config.js and should be rendered without any errors.

To Reproduce

1. Clone https://github.com/martinfrancois/swc-minification-repro
2. npm ci
3. npm run build
4. npm start
5. Open http://localhost:3000/ in your browser.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.