28

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
connexo
  • 53,704
  • 14
  • 91
  • 128
  • Relevant issue: https://github.com/webpack/webpack/issues/10216 – Klaycon Jan 29 '20 at 17:29
  • The parser webpack uses only implements stage 4 features, optional chaining is still afaik stage 3. It seems like they're not interested in supporting this specific usecase (stage 3 features with no downgrading) – Klaycon Jan 29 '20 at 17:30
  • @Klaycon Optional chaining **is** stage 4. https://github.com/tc39/proposal-optional-chaining/ – connexo Jan 29 '20 at 17:30
  • 1
    Quite right, my apologies. Acorn (the parser used by webpack) has an open pull request for optional chaining here: https://github.com/acornjs/acorn/pull/891 – Klaycon Jan 29 '20 at 17:33
  • @Klaycon It seems you can make that an acceptable answer. – connexo Jan 29 '20 at 17:38

3 Answers3

8

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.

Klaycon
  • 10,599
  • 18
  • 35
  • Unfortunately: *Ignored files should not have calls to import, require, define or any other importing mechanism.* We do have `import`s, of course, so the only thing I can do at this point is wait for that pull request to be merged, then wait until webpack upgrades to that new version of acorn. – connexo Jan 29 '20 at 17:43
6

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.

connexo
  • 53,704
  • 14
  • 91
  • 128
user3378165
  • 6,546
  • 17
  • 62
  • 101
5

It occurs that optional chaining won't be supported by Webpack 4 alone, however, it is already supported in Webpack 5, so if it's possible the best course of action would be to upgrade to Webpack 5.

Otherwise if you can't update to Webpack 5, you should use Babel (@babel/plugin-proposal-optional-chaining) or TypeScript compiler (target at most ES2019) for optional chaining transpilation.

Slava Fomin II
  • 26,865
  • 29
  • 124
  • 202