create-react-app: Minified React error #152 - comments before JSX

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

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.

+1

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

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.

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" />
    </>
  );
};

Wasted 2 hours on this…thanks

+1

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.

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/core@7.9.6
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).

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

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

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

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

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;

Happens in 3.4.0 too

I had the same error when having a comment like

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

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!

@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

Wasted my 3 hours… remove comments works for me

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

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!