Cannot import packages which use optional chaining

[schneefux]

Versions

• nuxt: 2.15.4
• node: 10.23.0 (codesandbox), 14, 15 and 16 (local)

Reproduction

https://codesandbox.io/s/confident-aryabhata-lbm28

Steps to reproduce

• Install vega-embed (https://github.com/vega/vega-embed) and its dependencies vega-lite and vega
• import embed from 'vega-embed'

What is Expected?

The import should work the same as in plain NodeJS, i.e. require('vega-embed') works fine.

What is actually happening?

Webpack fails:

Module parse failed: Unexpected token (104:28)
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
| export function mergeDeep(dest, ...src) {
|     for (const s of src) {
>         deepMerge_(dest, s ?? {});
|     }
|     return dest;

Additional Details

vega-lite has recently changed their codebase to use the nullish assignment operator (vega/vega-lite#7207) and the transpiled files in build/src/, which are imported on import, contain them.

I think this comment explains the cause of the problem: #7722 (comment)
However, explicitely enabling the babel plugins as recommended does not solve the issue, as can be seen in the codesandbox.

This could be related to #7722, apparently only partially fixed by #8203.
Another issue with similar problems: #8893.
This issue is also potentially related: nuxt/typescript#248

[pi0]

Hi @schneefux. Since webpack4 cannot undrestand syntax, you need to add vega-lite to build.transpile. See forked sandbox: https://codesandbox.io/s/xenodochial-lake-w07ge?file=/nuxt.config.js

export default {
  build: {
    transpile: ["vega-lite"]
  }
};

[schneefux]

That's it. Thank you!