Minified React error #152 - comments before JSX

[hugomallet]

Since CRA 3.4.1
Probably a babel issue

The following code raise an error on built version :

import React from 'react';

const Component = props => {
    return ( // a comment
        <div>
            toto
        </div>
    );
};

export default Component;

After building the app, i get the following error :

react-dom.production.min.js:209 Error: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=Component for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at react-dom.production.min.js:149
at za (react-dom.production.min.js:173)
at vo (react-dom.production.min.js:262)
at cu (react-dom.production.min.js:246)
at ou (react-dom.production.min.js:246)
at Zo (react-dom.production.min.js:239)
at qo (react-dom.production.min.js:230)
at Du (react-dom.production.min.js:281)
at react-dom.production.min.js:284
at tu (react-dom.production.min.js:240)

Removing the comment fixes the error

[Demerjianm]

+1

[Demerjianm]

Since CRA 3.4.1
Probably a babel issue

The following code raise an error on built version :

import React from 'react';

const Component = props => {
    return ( // a comment
        <div>
            toto
        </div>
    );
};

export default Component;

After building the app, i get the following error :

react-dom.production.min.js:209 Error: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=Component for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at react-dom.production.min.js:149
at za (react-dom.production.min.js:173)
at vo (react-dom.production.min.js:262)
at cu (react-dom.production.min.js:246)
at ou (react-dom.production.min.js:246)
at Zo (react-dom.production.min.js:239)
at qo (react-dom.production.min.js:230)
at Du (react-dom.production.min.js:281)
at react-dom.production.min.js:284
at tu (react-dom.production.min.js:240)

Removing the comment fixes the error

I was able to resolve mine by removing the comments as well. Not sure of a fix yet.

[ainannan2010]

+1

[zoink]

Wasted 2 hours on this...thanks

[kyashrathore]

I have something like this because of comment, ref is not assigned in production but working fine in development.

Remove comments everything works fine

export const IndeterminateCheckbox = ({
  indeterminate,
  isDuplicateRow,
  isDisabled,
  label,
  ...rest
}) => {
  const ref = React.useRef();
  React.useEffect(() => {
    console.log(ref, "ref");
    if (ref.current) {
      ref.current.indeterminate = indeterminate;
    }
  }, [ref, indeterminate]);
  return (
    // some comment here
    <>
      <input {...rest} ref={ref} type="checkbox" />
    </>
  );
};

[terebentina]

Happens in 3.4.0 too

[antoinerousseau]

Fyi I made a reproducible demo detailed in #8726
(and it happens in both 3.4.1 and 3.4.0 as stated above)

[ERRORthenBSOD]

omg thank you guys, i think that was a miracle i found this issue here. I already though i am crazy.
Because this error happens only on production build and everything is fine on local dev server.
And also interesting that error "happens" in last catch block before render component with comment, so i broke my brain trying to resolve any shit in this func but everything was fine.

[abduljeleelng]

Thank guy,
you really save me, my build successfully but PrivateRoute not working as it expected before I discovered the error, after 2 hours
Thanks a lot

[danielpaz6]

This error just happened to me, what comments should I need to remove? only those inside the rendering part?

Moreover, if I have comments that wrapped in brackets, would it be okay to keep them?

[antoinerousseau]

@danielpaz6 try and let us know :)

[danielpaz6]

@danielpaz6 try and let us know :)

Well, it actually worked... I removed ALL the comments from the rendering part.

[bryanlamtoo]

The only comments that work are the ones wrapped in brackets. The ones with '// ' will cause it to break.

[jonnyelliot]

I used this regex in VSCode to find the troublesome comments: \(\s*\n?\s*//

[KayO-GH]

I've played with my codebase quite a bit over the last hour to see what breaks it. It looks like the code breaks when the comment is at the beginning of the return statement. My code doesn't seem to care when the comment is anywhere after the first JSX tag. I stand to be corrected though.

Very weird and unexpected, tbh.

[sbusch]

Was anyone able to find a corresponding upstream issue?

I have a similar problem with obscure runtime errors in production which cannot be reproduced in dev, reported at #8738

[bugzpodder]

Ran into this issue as well, probably from terser minification.

worked around this by:

return (
// @ts-ignore
<Component />
);

to

const elem = (
// @ts-ignore
<Component />
);

return elem;

[stahlmanDesign]

The only comments that work are the ones wrapped in brackets. The ones with '// ' will cause it to break.

I can confirm this is true, and it's only after return (, not a variable such as const elem = (

This causes the error

return (
// NOTE
<Component/>
)

These do not

return (
/* NOTE */
<Component/>
)

const elem = (
// NOTE
<Component/>
)

Duplicate #8809

[aneeshpanoli]

I just came across this today. Removing comments solved it. React Minified error #152

[splex7]

Removing comments in JSX really sovle this problem. LOL....

[sbusch]

This problem (or at least an aspect of it) seems to be fixed since @babel/core 7.9.6.
(upstream issue babel/babel#11304 could be related, but I'm not sure).

Steps to reproduce the fix, based on @antoinerousseau's repro from #8687 (comment):

git clone https://github.com/antoinerousseau/cra-ts-bug.git
cd cra-ts-bug
yarn install
yarn build
npx serve -s build
# check http://localhost:5000 and observe the error

yarn run eject
yarn add @babel/[email protected]
rm -rf node_modules/.cache
yarn build
npx serve -s build
# check http://localhost:5000, error should be gone

I'm ejecting to prove it's fixed after upgrading @babel/core, see question below.

IMPORTANT: if you change the build setup, do not forget to rm -rf node_modules/.cache before rebuilding. Otherwise some changes will have no effect.

I don't know if other types of comments are fixed, the repro mentioned above tests only

<p>Should display OK below:</p>
  {DATA.map(({ id, value }) => (
    // this is a comment
    <p key={id}>{value}</p>
  ))}
</p>

Unfortunatley, create-react-app (react-scripts more specifically) has a fixed dependency "@babel/core": "7.9.0" and I don't know how to override this. Any tips appreciated.

It's time for a new CRA release...

---

Update 1: I tested with code from @hugomallet's original issue

const Component = props => {
    return ( // a comment
        <div>
            toto
        </div>
    );
};

and this is also fixed with @babel/core 7.9.6

---

Update 2: according to the latest commits to create-react-app, next release will land this babel fix, see for example here (create-react-app) and here (react-scripts).

[Nerfi]

@antoinerousseau isnt another way? or this is just the way it should be ?

[antoinerousseau]

@Nerfi if your previous version is built with this bug, I don't see how you can fix it without fixing your code and then rebuilding.

If you are not used to React apps development and production releases, you can read more at https://create-react-app.dev/docs/production-build/

[Nerfi]

@antoinerousseau Thanks for all the info and the help!!

[israrface44]

I removed all comments from my whole application still this issue is not resolved

[thisismydesign]

The problematic comments are most likely in dependencies.

[antoinerousseau]

@israrface44 can you please share a minimal reproduction of the issue?

[Alvinshuailiu626]

Wasted my 3 hours.... remove comments works for me

[braucalderon]

I had the same issue and removed all my comments outside of the function or if it was in a class components put them outside of the return. This blog was very helpful. That fixed the issue for deployment for me as well

[Israrulhaq23]

@israrface44 can you please share a minimal reproduction of the issue?

I fixed this issue, I missed one of the comments from app. I removed and this issue was fixed.

Thanks @antoinerousseau

[braucalderon]

The page was not rendering when it was uploaded into the server, however, it was rendering in my localhost. In my case was the comments added into the functions and the class components. Move the comments outside of the functions block in each component and with the class components, I moved them outside of the return with minimal comments in render. Braulio Calderon

…

On Oct 23, 2020, at 9:33 AM, Israrulhaq23 ***@***.***> wrote:  @israrface44 can you please share a minimal reproduction of the issue? I fixed this issue, I missed one of the comments from app. I removed and this issue was fixed. Thanks @antoinerousseau — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[siberianbear]

Issue is still here.
Comments in JSX caused to such a pain.
Spent 2 hours, while found this topic, removed all comments from everywhere and - finally magic happens!

[GiorgioPeng]

I had the same issue when I wanted to publish it into server. The OS of the server is Mac OS 10.15.7. But when I asked my partner to use his Windows PC to publish the same code, the pages can be rendered successful. Both of us is using the newest Nginx. I am going to try to remove comments to solve this problem.

I solved this problem by this blog.
It is a good solution for me.
for example :

import React from 'react';
 
function Welcome(props) {
    return (
        // Welcome App
        <div>
            Welcome to Resume Backend
        </div>
    );
}
 
export default Welcome;

We have to remove the line

        // Welcome App

[mmbmatteo]

I implemented a custom eslint rule to prevent this.

/*

  This is to avoid this bug
  https://github.com/facebook/create-react-app/issues/8687

  It will throw eslint error if you insert inline comments in the first two lines of a return statement

*/

module.exports = {
  rules: {
    'no-comments-at-jsx-return-start': {
      create: function (context) {
        return {
          ReturnStatement: function (node) {
            const comments = context.getCommentsInside(node)

            comments.forEach(comment => {
              if (comment.type === 'Line') {
                if (
                  node.loc.start.line === comment.loc.start.line ||
                  node.loc.start.line === comment.loc.start.line - 1
                ) {
                  context.report(node, 'Do not insert comments in return statement first two lines')
                }
              }
            })
          }
        }
      }
    }
  }
}

You probably want to apply this only to .jsx or .tsx files, editing your .eslintrc with something like this:

  "overrides": [
    {
      "files": [
        "src/**/*.tsx"
      ],
      "excludedFiles": "*.test.*",
      "rules": {
        "my-project/no-comments-at-jsx-return-start": "error"    
      }
    }
  ]

Of course the are pitfalls:

• it will throw errors in any return statement, not only react component, but also other methods.

It can be improved but I did not want to spend more time on it.

It helped me prevent breaking my compiled app again (it happened twice before).

[iansu]

This doesn't seem like an issue with Create React App itself.

[karlhorky]

@iansu I guess it seems to be a problem with the dependency that Create React App had (or still has?) on certain versions of @babel/core, since this Yarn Resolutions entry fixed the issue for the person I was helping.

It was a while ago though, so not sure if this issue is still present in the newer versions of Create React App.

[evergreenx]

Am currently experiencing the same error, tried removing all comments yet the error still occurs.

[Instrumedley]

I had the same error when having a comment like

/** TODO:
*Refactor into a newer component
*/

[GiorgioPeng]

@Instrumedley Maybe you should pay more attention to the position of the comment instead of the comment itself.
You can try to move the position of the comment.

[DuvanCorrea]

Actualmente estoy experimentando el mismo error, intenté eliminar todos los comentarios, pero el error persiste.

x2 Aun tengo el problema

[haiwen1206]

https://reactjs.org/docs/error-decoder.html/?invariant=152&args%5B%5D=ni

I've deleted all the comments and return;
than finally solved the problem

[mayurn-code]

Minified React error #152
return (
{isVerify &&
<Autocomplete
value={value}
onChange={(event,newValue) => {
setValue(newValue);
}}
inputRef={inputRef}
inputValue={inputValue}
onInputChange={handleInputChange}
id="controllable-states-demo"
error={error}
options={occupationItems}
getOptionLabel={(option) => option.text || ''}
loading={isLoading}
renderInput={(params) => <TextField {...params} label={t('occupations')} className={error ? 'red-border' : ''} />}
required
/>
}
)

I solved this problem like this:--
return (
<>
{isVerify &&
<Autocomplete
value={value}
onChange={(event,newValue) => {
setValue(newValue);
}}
inputRef={inputRef}
inputValue={inputValue}
onInputChange={handleInputChange}
id="controllable-states-demo"
error={error}
options={occupationItems}
getOptionLabel={(option) => option.text || ''}
loading={isLoading}
renderInput={(params) => <TextField {...params} label={t('occupations')} className={error ? 'red-border' : ''} />}
required
/>
}
</>
);