I started to get reports about users that can’t run the app (React) on the old browser. I did some debugging and turned out it’s all because of optional chaining used in the date-fns
package.
The error in the console is:
vendor.js?id=90110bbd2ec643f1abf946793e283132:2 Uncaught SyntaxError:
Unexpected token ‘.’
And when I open vendor.js compiled file I can see the issue is about:
n?.roundingMethod
I can see that below Chrome 80 optional chaining is not supported: https://caniuse.com/mdn-javascript_operators_optional_chaining.
I tried supporting it via babel.config.js file by adding @babel/plugin-transform-optional-chaining
plugin:
module.exports = {
presets: [
[
'@babel/preset-env',
{
corejs: 3.8,
modules: false,
targets: '> 0.5%, last 2 versions',
useBuiltIns: 'entry',
},
],
'@babel/preset-react',
'@babel/preset-typescript',
],
plugins: [
'styled-components',
'@babel/plugin-transform-class-properties',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-optional-chaining',
],
env: {
test: {
plugins: [
'@babel/plugin-transform-runtime',
'@babel/plugin-transform-modules-commonjs',
'@babel/plugin-transform-optional-chaining',
'dynamic-import-node',
],
},
},
};
Then I also tried adding Chrome 79 explicitly in the same file:
targets: '> 0.5%, last 2 versions, Chrome 79'
That also did not help so finally I added it to the webpack config file
use: [
{
loader: 'babel-loader',
options: {
plugins: ['@babel/plugin-transform-optional-chaining'],
presets: ['@babel/preset-env'],
},
},
],
None of the above helped. Am I doing something wrong or missing something obvious? Or maybe since that’s an error from the external package I should handle it separately?