[TextField] Module parse failed: Unexpected token

[mhienle]

After updating to v4.9.12, I get the following error:

ERROR in ./node_modules/@material-ui/core/es/TextField/TextField.js 109:46
Module parse failed: Unexpected token (109:46)
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
|
|     if (label) {
>       const displayRequired = InputLabelProps?.required ?? required;
|       InputMore.label = /*#__PURE__*/React.createElement(React.Fragment, null, label, displayRequired && '\u00a0*');
|     }
 @ ./node_modules/@material-ui/core/es/TextField/index.js 1:0-38 1:0-38
 @ ./node_modules/@material-ui/core/es/index.js

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The above error occurs when I start webpack-dev-server. It disappears when I locally change the line

const displayRequired = InputLabelProps?.required ?? required;

to

const displayRequired = InputLabelProps ? InputLabelProps.required : required;

in TextField.js.

Expected Behavior 🤔

The error should not occur.

Steps to Reproduce 🕹

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.9.12
React	16.13.1
TypeScript	3.8.3

Related to #20715

[oliviertassinari]

@mhienle This is expected, our sources take advantage of the latest version of ECMAScript, by extension, it impacts the /es version: https://material-ui.com/guides/minimizing-bundle-size/#ecmascript. The syntax you have an issue with is:

• Nullish Coalescing Operator https://github.com/tc39/proposal-nullish-coalescing
• Optional Chaining Operator: https://github.com/tc39/proposal-optional-chaining

They are both in stage 4. So they will be included in the next language specification (around June 2020?)

TC39 process has five different stages to get the specification live.

• Stage 0: Strawperson — to allow input into specifications
• Stage 1: Proposal — make the case for the addition, describe the solution and identify the potential challenges
• Stage 2: Draft — describe the syntax and semantics using formal spec language
• Stage 3: Candidate — states that further refinement will need feedback from implementations and users
• Stage 4: Finished — states that the addition is ready for inclusion in the formal ECMAScript standard

[mhienle]

@oliviertassinari If this is expected, could you point me to a workaround? This currently prevents my team from upgrading to v4.9.12

[oliviertassinari]

@mhienle The answer is in https://material-ui.com/guides/minimizing-bundle-size/#ecmascript, this is meant for advanced cases. Your question makes me believe you are not on the targeted audience for using the /es distribution.

[eps1lon]

The docs point to the latest spec. Stage 4 is not part of the spec (yet). The problem is that babel no longer offers the ability to transpile for a certain version of ES.

I'd say we fix it here and rewrite the section in v5 to match how babel works.

[mhienle]

@oliviertassinari Thanks for your help.
We introduced the /es version like half a year ago, apparently to minimize bundle size, and never had a problem with that before. We also weren't aware that users are discouraged to use it. We will see if using the "normal" version resolves the issue.

[oliviertassinari]

We don't discourage the usage of /es per say. It's meant for advanced use cases.

[oliviertassinari]

@eps1lon should we reopen?

[QuangTrungK15]

@mhienle I just upgrade material-ui core to 4.9.5 and it working :)

[mhienle]

We were also able to update to 4.9.13 after no longer using the es-bundle of material. This increased our bundle size by approx. 1% which we considered to be fine.

[Katanji]

@mhienle I just upgrade material-ui core to 4.9.5 and it working :)

version 4.9.11 also without this error )

[Farbod29]

It works for me !!!

go to your nodemodule folder

/node_modules/@material-ui/core/es/TextField

and comment inside the if statement.

if (variant === 'outlined') {
if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
InputMore.notched = InputLabelProps.shrink;
}

if (label) {
 // const displayRequired = InputLabelProps?.required ?? required;
  //InputMore.label = /*#__PURE__*/React.createElement(React.Fragment, null, label, displayRequired && '\u00a0*');
}

}

[oliviertassinari]

@Farbod29 Note that the /es/ folder is only meant for advanced use cases.