Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[v12.1.1] Multi-line comment at the start of return of the render function breaks app (Minified React error #152)

See original GitHub issue

Verify canary release

I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Apr 2 22:23:49 UTC 2021
Binaries:
  Node: 16.13.1
  npm: 8.1.2
  Yarn: 1.22.15
  pnpm: N/A
Relevant packages:
  next: 12.1.2-canary.0
  react: 17.0.2
  react-dom: 17.0.2

Describe the Bug

When you insert a multi-line comment directly at the start of the return of the render function, the app breaks.

For example:

const Home: NextPage = () => {
return (
  /**
   * Some comment.
   */
  <div className={styles.container}>
    <Head>
  ...

This will create different errors based on your runtime and the view:

Development (`npm run dev`)

error - Error: Home(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Browser:

Production (`npm run build`)

info  - Collecting page data  
[    ] info  - Generating static pages (0/3)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=Home for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at ab (/home/bennett/code/nextjs-render-comment-bug/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:32:466)
    at d (/home/bennett/code/nextjs-render-comment-bug/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:34:55)
    at bb (/home/bennett/code/nextjs-render-comment-bug/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/home/bennett/code/nextjs-render-comment-bug/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/home/bennett/code/nextjs-render-comment-bug/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at Object.exports.renderToString (/home/bennett/code/nextjs-render-comment-bug/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (/home/bennett/code/nextjs-render-comment-bug/node_modules/next/dist/server/render.js:766:45)
    at Object.defaultGetInitialProps (/home/bennett/code/nextjs-render-comment-bug/node_modules/next/dist/server/render.js:376:51)
    at Function.getInitialProps (/home/bennett/code/nextjs-render-comment-bug/.next/server/pages/_document.js:563:20)
    at Object.loadGetInitialProps (/home/bennett/code/nextjs-render-comment-bug/node_modules/next/dist/shared/lib/utils.js:65:29)
info  - Generating static pages (3/3)

> Build error occurred
Error: Export encountered errors on following paths:
        /
    at /home/bennett/code/nextjs-render-comment-bug/node_modules/next/dist/export/index.js:396:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (/home/bennett/code/nextjs-render-comment-bug/node_modules/next/dist/trace/trace.js:79:20)
    at async /home/bennett/code/nextjs-render-comment-bug/node_modules/next/dist/build/index.js:993:17
    at async Span.traceAsyncFn (/home/bennett/code/nextjs-render-comment-bug/node_modules/next/dist/trace/trace.js:79:20)
    at async /home/bennett/code/nextjs-render-comment-bug/node_modules/next/dist/build/index.js:869:13
    at async Span.traceAsyncFn (/home/bennett/code/nextjs-render-comment-bug/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/home/bennett/code/nextjs-render-comment-bug/node_modules/next/dist/build/index.js:55:25)
➜  nextjs-render-comment-bug git:(master)

I can confirm this happens for both variants of the multi-line comment (one or two asterisks):

One asterisk
```
  /*
   * Some comment.
   */
```
Two asterisks
```
  /**
   * Some comment.
   */
```

It does NOT happen for:

One asterisk in one line
```
  /* Some comment. */
```
Two asterisks in one line
```
  /** Some comment. */
```
Normal comment over multiple lines
```
  // Some
  // Comment   
```

To Reproduce

Reproduction repo:

https://github.com/bennettdams/nextjs-render-comment-bug

…or to manually reproduce:

npx create-next-app@12.1.2-canary.0 --ts --use-npm .
Install canary npm i next@12.1.2-canary.0
Add a multi-line comment to start of the render function of index.tsx directly after return:

const Home: NextPage = () => {
return (
  /**
   * Some comment.
   */
  <div className={styles.container}>
    <Head>
  ...

npm run dev or npm run build

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

jakstcommented, Mar 29, 2022

@bennettdams try wrapping your comments within the render function in curly brackets.

You can also just move your comments above the return statement.

But a workaround is sort of uninteresting here. The important thing is to get the issue fixed. This led to production crashes for us, and there’s no way to stop the issue from being reintroduced.

0reactions

ijjkcommented, Mar 31, 2022

Hi, this has been updated in v12.1.4-canary.0 of Next.js, please update and give it a try!

Top Results From Across the Web

Minified React error #152 - how to resolve this? - Stack Overflow

The error description is here, you return nothing as result of render method of you react component. Return something else instead of it....

How to Fix Minified React error #152 - Amit K Khanchandani

Error: “Minified React error #152; visit https://reactjs.org/docs/ ... Removed the comments from the start of the rendering part (return).

https://ora.ox.ac.uk/objects/uuid:d8f35139-9617-4c...

baseUrl+="/"),"string"==typeof e.urlArgs){var r=e.urlArgs;e.urlArgs=function(e,n){return(n.indexOf("?")===-1?"?":"&")+r}}var t=$.shim,i={paths:!0,bundles:!0 ...

addthis_widget.js(1).çàãðóæåíî - http :// book . itep . ru

!function(e){function t(n){if(r[n])return r[n].exports;var ... use the non-minified dev environment for the full error message and additional helpful ...

PrizmDoc Viewer v13.17 - Accusoft Support

applications. Document Viewing for the Browser. PrizmDoc Viewer includes an advanced HTML Viewer control which allows your users to view, search, annotate, ...