Webpack 4 can not run code with Optional Chaining Operator

[MkSavin]

Hello, my application uses your wonderful package, but recently I ran into a problem: when updating dependencies and trying to run the application, I get an error from babel-loader pointing to the air-datepicker.js file.

Error description:

Failed to compile.

./node_modules/air-datepicker/air-datepicker.js 337:32
Module parse failed: Unexpected token (337:32)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|           date: i
|         } = o(this.date),
>             s = this.customData?.attrs || {};
|         this.$cell = n({
|           className: this._getClassName(),

Since version 3.3.3, optional chaining operators (?.) appeared in your package code, which are successfully supported by all modern browsers, but, unfortunately, are not supported by the Webpack 4 (React/CRA 4) builder. And, unfortunately, it will be quite difficult for me to fix this problem, so I ask you to fix this nuance with yours.

On the Internet, I found one fairly simple way to solve this problem: use the @babel/plugin-proposal-optional-chaining plugin for babel (https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining), it will transpile these operators into ternary expressions, no code changes are required.

P.S. also Webpack 4 has a problem with nullish coalescing operator in packages, there is also a plugin for it: https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator

[t1m0n]

Hello! Hmm, but chaining operator was in code since version 3.0.0, for instance here

air-datepicker/src/datepickerCell.js

Line 114 in 01b639b

return classNames(classNameCommon, classNameType, this.customData?.classes);

Usually you should set webpack to ignore node_modules directory, maybe this causes the error.

[MkSavin]

Thank you for your answer, I looked into older versions and saw that indeed such optional chaining operators already existed in the source code, but the essence of the problem does not change much, because they were not in the compiled code

For your provided example, the compiled code in v3.3.4 looks like this (https://github.com/t1m0n/air-datepicker/blob/01b639be74e7d2ac80f61e069a998776835a2728/dist/air-datepicker.js):

return u(d,c,this.customData?.classes)

But compiled example in v3.3.2 looks like this (https://github.com/t1m0n/air-datepicker/blob/0e24b3dfd32067532c9e83e8d93173dad07b05bc/dist/air-datepicker.js):

return c(m,g,null===(t=this.customData)||void 0===t?void 0:t.classes)

And, unfortunately, I can not ignore node_modules directory due to CRA4 specifics.

[t1m0n]

Hmmm, strange... I think its because of my different dev environments. Will try to fix this on next week

[t1m0n]

Added optional chaining operator handling in v3.3.5