Docusaurus: Optional chaining breaks build when targeting modern browsers

[ianschmitz]

🐛 Bug Report

Using the optional chaining operator causes the build to fail when targeting modern browsers through browserslist. See https://github.com/facebook/create-react-app/pull/8526 for the same issue we ran into in CRA.

Have you read the Contributing Guidelines on issues?

Yes.

To Reproduce

1. Set "browserslist": ["last 1 chrome version"] in package.json of generated project (may need to delete node_modules/.cache if it exists)
2. Create a React component that is used in a .mdx document
3. Use optional chaining operator within the React component
4. Use start or build script and observe error similar to following:

Expected behavior

Build succeeds.

Actual Behavior

Module parse failed: Unexpected token (12:111)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| useEffect(()=>{if(!messagingJson){return;}// Decode entities in the URL
> const hash=window.decodeURIComponent(window.location.hash);if(hash){document.getElementById(hash.substring(1))?.scrollIntoView();}},[messagingJson]);return messagingJson?/*#__PURE__*/React.createElement(MessagingContent,{schema:messagingJson,type:type}):/*#__PURE__*/React.createElement("div",null,"Loading...");}
 @ ./src/components/ViewerMessaging/index.ts 1:0-39 1:0-39
 @ ./docs/mobile/api-commands-operations-events.mdx
 @ ./.docusaurus/registry.js
 @ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
 @ ./.docusaurus/routes.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js

Your Environment

• Docusaurus version used: 2.0.0-alpha.56
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Chrome 83
• Operating system and version (desktop or mobile): Ubuntu 20.04

[slorber]

Thanks for reporting.

Can confirm.

Easier steps to reproduce directly on D2 website, for a contributor:

"browserslist": ["last 1 chrome version"]

rm -rf website/node_modules/.cache

yarn start:v2

The classic theme that we use already uses nullish coalescing / optional chaining

[slorber]

@yangshun I added MLH tag, it's probably just adding the 2 plugins in the webpack config.

[slorber]

probably need to wait as there are pending changes to babel config here: https://github.com/facebook/docusaurus/pull/2903/files

[ianschmitz]

This may be fixed upstream: https://github.com/webpack/webpack/issues/10227#issuecomment-642536906.

Edit: Doh, looks like webpack 4 is still referencing acorn 6: https://github.com/webpack/webpack/blob/dfd20210c9441c309859d29d3b256474ae5101e5/package.json#L12.

[slorber]

fixed by https://github.com/facebook/docusaurus/pull/2951

[slorber]

Released in https://github.com/facebook/docusaurus/releases/tag/v2.0.0-alpha.58