Experimental syntax breaks CRA applications

[tractorcow]

Hello, I've been trying to get metro4-react working with a CRA app, and I've run across an issue where usage of experimental babel syntax is causing issues.

Failed to compile.

./node_modules/metro4-react/src/components/collapse/collapse.jsx 10:24
Module parse failed: Unexpected token (10:24)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| export default class Collapse extends React.Component {
>     static defaultProps = {
|         className: "collapse-css-transition",
|         style: {}

The issue I've had is exactly the same as material-components/material-components-web-react#107, so I won't repeat the conversation. :)

The issue is https://github.com/olton/Metro4-React/blob/master/.babelrc#L6, which cannot be enabled in a CRA without ejecting the app entirely.

Suggested solutions are:

• Don't use any experimental js syntax
• Transpile ES5 when distributing to npm. (example https://github.com/material-components/material-components-web-react/pull/108/files)

Sorry I'm not really proficient enough to give much more specific suggestions.

[olton]

Thank you. I will take note.

[olton]

Default props now redefined to:

ComponentName.defaultProps = {...}

[tractorcow]

Thanks @olton :D

[peckyboy]

Has this been fixed? What's the fix please?

[olton]

Update to latest

[anton-dementiev]

Same error as of October 17, 2021 when trying to compile

Failed to compile.

./node_modules/metro4-react/src/components/tag-input/tag-input.js
SyntaxError: /Users/Anton/Desktop/picker/react/node_modules/metro4-react/src/components/tag-input/tag-input.js: Support for the experimental syntax 'jsx' isn't currently enabled