react-spectrum: 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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 9
Comments: 19 (8 by maintainers)

Commits related to this issue

Adjust browserslist to compile optional chaining Fixes #2857 — committed to adobe/react-spectrum by devongovett 2 years ago
chore(deps): allow managing new URLPattern standard Big changes due to https://github.com/adobe/react-spectrum/issues/2857 — committed to sneko/hyperlink-middleware by sneko 2 years ago

Most upvoted comments

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.

+13

devongovett on Feb 16, 2022

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.

+11

devongovett on Feb 16, 2022

Same problem here with @internationalized/number version 3.0.4 and Webpack (which I can’t update atm). Version 3.0.3 worked fine; version 3.0.4 has optional chaining in dist/module.js. I worked around that by pinning the version for now.

spahnke on Feb 16, 2022

Yeah exactly. If you choose you can compile your node_modules according to your browser targets. This was more of an unfortunate case of build tools themselves being outdated more than browsers.

devongovett on Feb 21, 2022

Most browsers are evergreen these days, so if you specifically choose not to update, you’re making some kind of statement.

Yes and no 😛 Some people are just locked on the browser version, because of their OS/hardware: https://blog.jim-nielsen.com/2022/a-web-for-all/.

On a side note: to be honest I’m not really sure if this should be a library author’s concern 🤔

0ctothorp on Feb 21, 2022

I also had problems with nullish coalescence and optional chaining in storybook (also with react-aria imported code).

0ctothorp on Feb 16, 2022