Create-react-app: 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 https://github.com/facebook/create-react-app/issues/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 https://github.com/facebook/create-react-app/issues/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 https://github.com/facebook/create-react-app/issues/8687#issuecomment-606199085:

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).

[johnliu55tw]

I've encountered an issue that after clicking a button, the whole page goes blank and console reports Minified React error #152, and this only happens in production build! Everything goes well in the dev environment :cry:

Spent several hours trying to solve this without any clues and this post saves me! This is the comment that causes the issue:

export const MyComponent (props) => (
  // THIS COMMENT WOULD BREAK EVERYTHING!
  <div>
    ...
  </div>
)

Thank you!

[japananh]

Thank you. Remove comment save me.

[krittiyaclark]

After deployment to either Netlify or Heroku. URL parameter did not work and struggling for days. Remove all the comments from the return statement make it is all work. Thank you!

[Mdsp9070]

Well, I didn't belive that simply removing all the comments would work, but work it! 2 days struggling having same issue of @krittiyaclark! Thank you!

[chisNaN]

Wanted to add that i faced the same problem
where removing the comments in the problematic component was not sufficient
and just had to write down a similar component with different name from scratch
Not that i used parcel bundler and its likely something broken sowewhere with the cache.
Well also also couples of hour on that

[loyoliteabid]

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.

The error resolved when i removed a comment from JSX

[AlexVak1993]

Thanks!! Remove comment solving my problem too! 👍 :D

[rudymarca]

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

Gracias

[kaminskypavel]

well ... that was 2 hours of going down the rabbit hole with rewire
just to realize @Hugodby was right ❤!

@jonnyelliot thanks for the regex 👏

[DRISHTANT-DUBEY]

After 2 times project re-initialization, I found to remove comments from each and every file even serviceworker.js will help to web app ready for the show

[zakariaelk]

Spent over 2 hours on this! Thanks so much!

[neighbaa]

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.

I use yarn and I just add a "resolutions" block to my project's package.json. It works like a charm.

"resolutions": { "@babel/core": "^7.9.6" }

This way, you don't have to chase all the breaking comments down, though I'm not sure what the repercussions of this might be.

[nithin2889]

I removed all the comments and my app worked fine!

[adhamaa]

thank you on this issue you've just save the world....

[Nerfi]

after removing the comments from the return stament in JSX I have to run firebase deploy again or I should run all the commands as well ? Like, push, comment and add ? Thanks in advance ! Im asking this because I run into this once the app was deployed

[antoinerousseau]

@Nerfi you have to build your app again and deploy it again.

[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 [e-mail] 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