3.8.0 - error on ?? (nullish coalescing operator)

🐛 Bug Report

Version 3.8.0 just got released, including a nullish coalescing operator (??). This breaks in certain environment, like Jest.

  ● Test suite failed to run

    Jest encountered an unexpected token
    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    [...]

    Details:

    /github/home/Library/Caches/Bit/capsules/44d80e1c05a5191ec871aec76c25c66afd3b0734/node_modules/.pnpm/registry.npmjs.org+@react-aria+interactions@3.8.0_react@17.0.2/node_modules/@react-aria/interactions/dist/main.js:558
        ref = ref ?? newRef;
                   ^

    SyntaxError: Unexpected token '?'

      1 | import React, { ReactNode, useRef } from 'react';
    > 2 | import { useButton } from '@react-aria/button';
        | ^
      3 | import { Link } from '@teambit/base-react.navigation.link';

🤔 Expected Behavior

code should have been compiled down to:

ref = (_ref = ref) !== null && _ref !== void 0 ? _ref : newRef;

Usually, typescript handles that.

😯 Current Behavior

Code remains with the original ?? operator:

const $103a536ab6395e4d$export$27c701ed9e449e99 = /*#__PURE__*/ ($parcel$interopDefault($hZjuk$react)).forwardRef(({ children: children , ...props }, ref)=>{
    let newRef = $hZjuk$react.useRef();
    ref = ref ?? newRef; // <---------------------
    let { pressProps: pressProps  } = $213abf3f34aca140$export$45712eceda6fad21({
        ...props,
        ref: ref
    });
    let child = ($parcel$interopDefault($hZjuk$react)).Children.only(children);
    return(/*#__PURE__*/ ($parcel$interopDefault($hZjuk$react)).cloneElement(child, // @ts-ignore
    {
        ref: ref,
        ...$hZjuk$reactariautils.mergeProps(child.props, pressProps)
    }));
});

💁 Possible Solution

[devongovett]

We have temporarily reverted our browserslist config to a lower browser target such that optional chaining and nullish coalescing are now transpiled in our published packages. This has been released in a patch to all packages. That should keep things working for the time being.

However, we would like to update this again in the future so that we can avoid transpiling syntax that is supported by our browser targets in order to reduce bundle sizes and improve runtime performance. Please upgrade to webpack 5 (or parcel? 😉😉) and/or the latest version of jest as soon as you can. We plan to re-introduce this change in July 2022. Given that webpack 5 has already been available for over a year (released in October 2020), we hope this gives everyone ample time to upgrade their dev dependencies.

Sorry again for the unexpected inconvenience.

[devongovett]

Browser support is documented here: https://react-spectrum.adobe.com/react-aria/interactions.html#supported-browsers-and-platforms

Private class properties are also pretty widely supported, but it looks like they should be compiled (due to safari). Looking into it. https://caniuse.com/mdn-javascript_classes_private_class_fields

However, webpack being a lower support target than browsers is a new one we hadn’t considered. I would definitely recommend upgrading if you can, but we are discussing what to do about it now and will have an update soon. Sorry for the inconvenience and thanks for your patience.