Optional chaining doesn't work out of the box about neutrino

[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: webpack/webpack#10227
• State of Neutrino's Webpack 5 support: #1624

[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"]
                }))
    ],
};