Search code examples
javascriptwebpackoptional-chaining

How to make webpack accept optional chaining without babel


Scenario:

  • We're using webpack 4 to create a bundle from our Javascript sources.
  • We're not using Babel because we're authoring only for a single platform (latest Chrome), and we're only using features directly available in Chrome, thus no transpiling is required.

The plus side of this is a smaller bundle, and much faster turnaround times while developing.

Now we would like to start using the stage 4 optional chaining feature which can be enabled in Chrome using a flag.

I've tried to google this, and all I was able to find is that babel has a plugin for this.

Question: Is there any way to make webpack accept this syntax while omitting babel?

Here's what webpack currently reports:

ERROR in ./src/js/components/custom-select.js 245:12
Module parse failed: Unexpected token (245:12)
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
|      */
|     focus() {
>         this.input?.focus();
|         return this;
|     }
 @ ./src/js/components/components.js 16:0-49 16:0-49

Solution

  • Relating to @Klaycon's answer, Acorn released today a new version that supports optional chaining. As soon as Webpack reflects the change on their side- using optional chaining with webpack shouldn't be a problem anymore.