Optional chaining doesn't work out of the box

[linusdm]

Bug

• What version of Neutrino are you using? 9.4.0
• Are you trying to use any presets? If so, which ones, and what versions? @neutrionojs/react v9.4.0
• Are you using the Yarn client or the npm client? What version? npm v6.14.8
• What version of Node.js are you using? v14.8.0
• What operating system are you using? ubuntu
• What did you do? use optional chaining (possiblyNull?.property)
• What did you expect to happen? optional chaining to work out of the box
• What actually happened, contrary to your expectations? Optional chaining does not work out of the box, although this issue suggests otherwise: Include @babel/plugin-proposal-optional-chaining #1501.

[linusdm]

Adding the @babel/plugin-proposal-optional-chaining plugin to the babel configuration solves the issue. I'm not sure whether this is to be expected. I was assuming that since @babel/preset-env is enabled, and optional chaining has matured to stage four, explicitly adding a proposal plugin isn't required anymore.

const react = require("@neutrinojs/react");
const babelMerge = require("babel-merge");

module.exports = {
    options: {
        root: __dirname,
    },
    use: [
        react(),
        neutrino =>
            neutrino.config.module
                .rule("compile")
                .use("babel")
                .tap(options => babelMerge(options, {
                    plugins: ["@babel/plugin-proposal-optional-chaining"]
                }))
    ],
};

[davidje13]

This is actually because Neutrino's default browser targets are all able to do optional chaining natively (https://github.com/neutrinojs/neutrino/blob/master/packages/web/index.js#L121)

That means the optional chaining never gets transpiled by Babel (which is good; the targets don't need it to be). But sadly, Webpack 4 fails to parse that syntax during the bundling stage. Apparently it's fixed in Webpack 5.

If you want to enable optional chaining transpilation without adding it explicitly, you can target a browser which needs the transpilation:

  use: [
    react({
      targets: { browsers: [
        // the default targets:
        'last 2 Chrome versions',
        'last 2 Firefox versions',
        'last 2 Edge versions',
        'last 2 Opera versions',
        'last 2 Safari versions',
        'last 2 iOS versions',
        // a target which needs optional chaining transpilation:
        'ie 11',
      ] }
    }),
  ],

But of course that's also just a workaround.

Further reading:

• Stack Overflow question about this error
• Webpack 4 bug: Unexpected token error at code with optional chaining when using Typescript webpack/webpack#10227
• State of Neutrino's Webpack 5 support: Webpack 5 support #1624