Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make webpack accept optional chaining without babel

Tags:

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
like image 847
connexo Avatar asked Jan 29 '20 17:01

connexo


People also ask

Does Webpack require Babel?

If Babel is a translator for JS, you can think of Webpack as a mega-multi-translator that works with all kinds of languages (or assets). For example, Webpack often runs Babel as one of its jobs. Another example, Webpack can collect all your inline CSS styles in your Javascript files and bundle them into one.

Does Babel support optional chaining?

We can use Optional Chaining now throw the Babel compiler. I will describe how to configure: Babel. ESLint.

How do you add optional chaining?

To enable optional chaining, you need to install a package. At the time of writing, optional chaining is not natively supported in Javascript, it is a new feature introduced in ES2020. Until it is fully adopted we can get all the optional goodness by installing a package!

Can I use optional chaining (?

You can use optional chaining when attempting to call a method which may not exist. This can be helpful, for example, when using an API in which a method might be unavailable, either due to the age of the implementation or because of a feature which isn't available on the user's device.


Video Answer


2 Answers

According to this similar issue, webpack relies on the parser Acorn and thus presumably needs Acorn to support optional chaining first. Acorn has an open pull request here for optional chaining, but in the meantime, a "solution" suggested by a user in the first issue is to disable parsing on the files you need optional using module.noParse until such a time that Acorn and webpack support the feature.

Update: Optional chaining is now supported in Acorn as of v7.3.0, and according to this webpack issue comment, it sounds like they don't expect webpack to support it until webpack 5 releases. The progress to webpack 5 can be tracked here.

like image 184
Klaycon Avatar answered Sep 20 '22 11:09

Klaycon


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.

like image 45
user3378165 Avatar answered Sep 18 '22 11:09

user3378165