Nullish coalescing / optional chaining support without IE11 in targets

Currently production builds wihout IE11 in targets will fail if Nullish coalescing / optional chaining used in project codebase.

Issue from: https://github.com/terser/terser/issues/567 Related issue: https://github.com/ember-cli/ember-cli-uglify/issues/49

Error will looks like:

ERROR Summary:

  - broccoliBuilderErrorStack: SyntaxError: Unexpected token: punc (.)
    at ee (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\terser\dist\bundle.min.js:1:19541)
    at c (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\terser\dist\bundle.min.js:1:28244)
    at l (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\terser\dist\bundle.min.js:1:28335)
    at f (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\terser\dist\bundle.min.js:1:28388)
    at G (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\terser\dist\bundle.min.js:1:42202)
    at ge (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\terser\dist\bundle.min.js:1:48272)
    at C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\terser\dist\bundle.min.js:1:49152
    at be (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\terser\dist\bundle.min.js:1:49167)
    at ze (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\terser\dist\bundle.min.js:1:50421)
    at qe (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\terser\dist\bundle.min.js:1:50653)
  - code: [undefined]
  - codeFrame: Unexpected token: punc (.)
  - errorMessage: Unexpected token: punc (.)
        at UglifyWriter
-~- created here: -~-
    at UglifyWriter.Plugin (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\broccoli-plugin\index.js:7:31)
    at new UglifyWriter (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\broccoli-uglify-sourcemap\index.js:38:10)
    at UglifyWriter (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\broccoli-uglify-sourcemap\index.js:33:12)
    at Class.postprocessTree (C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\ember-cli-uglify\index.js:54:50)
    at C:\Users\lifeart\Documents\repos\brn\frontend\node_modules\ember-cli\lib\utilities\addon-process-tree.js:6:25
    at Array.reduce (<anonymous>:null:null)

Discord thread: https://discord.com/channels/480462759797063690/486548111221719040/737966824775221258

[pichfl]

Another potential fix: Explicitly include the babel plugins for those two features into your ember-cli-build.js like this:

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    babel: {
      include: ['proposal-nullish-coalescing-operator', 'proposal-optional-chaining'], // Remove once terser supports these
      plugins: [require.resolve('ember-auto-import/babel-plugin')],
    },
  });

  return app.toTree();
};

[boris-petrov]

As a workaround, one could use targets that are for browsers without native support for those two features (so they are transpiled by babel and terser won’t blow up). I, personally, use these:

'chrome >= 82',
'edge >= 18',
'firefox >= 76',
'safari >= 13',

And that works fine.