Support optional chaining by default

[zanzlender]

Describe the feature you'd like to request

I have had many can't access property of undefined errors and I could figure out why, although I have been using optional chaining. After some search I found the reason and also the solution. I believe many people are affected by this, and are probably losing their minds like I was, because they can't figure out why this is happening :(

I know this is already a known bug but I would like to propose adding Babel's solution for this by default, as explained here: @babel/plugin-proposal-optional-chaining

I don't know if you already are aware of this, but didn't do it because it may affect something else. However I noticed this and thought it would be beneficial to be added. If I'm wrong just ignore this 👍

Describe the solution you'd like

It's just a matter of installing the package provided by Babel, like so:

npm install --save-dev @babel/plugin-proposal-optional-chaining

and then adding this code in a .babelrc config file

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

Describe alternatives you've considered

That would already be all :D

[thibautsabot]

Hello!

I think the big focus of the Next.js team is on SWC (which is enabled by default)
SWC does support optional chaining, making it easier for people to use it by default.

See https://nextjs.org/docs/advanced-features/compiler and https://swc.rs/docs/migrating-from-babel#comparison

[AndrewUsher]

It seems like next/babel already includes this plugin: https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts#L97

If you need to include any other babel plugins/presets, you'll need to make sure you include next/babel in your config as noted here: https://nextjs.org/docs/advanced-features/customizing-babel-config

[zanzlender]

Cool then, ty for the info! It seems I was a little late 😂

[jantimon]

The question is - how long do we need to transpile that?

All browsers support optionalChaining since 2020:

https://caniuse.com/?search=optional%20chaining

adding optionalChainging with Babel or SWC increases the bundle size a little bit.

for eaxmple

console.log(window?.some?.property?.value);

const x = window.foo?.bar ?? null

is transpiled to:

var ref, ref, ref;
console.log(window === null || window === void 0 ? void 0 : (ref = window.some) === null || ref === void 0 ? void 0 : (ref = ref.property) === null || ref === void 0 ? void 0 : ref.value);
var ref;
const x = (ref = (ref = window.foo) === null || ref === void 0 ? void 0 : ref.bar) !== null && ref !== void 0 ? ref : null;

[Netail]

All browsers support optionalChaining since 2020

True, but we've been getting some reports for our e-commerce app by old iOS users :(

[Netail]

Does anyone know to polyfill optionalChaining with swc in a NextJS setup?