Can't use optional chaining operator

When using the ?. operator, as in item?.status, yarn start cannot compile the code:

ERROR in ./src/selectors/sources.js 7:155
Module parse failed: Unexpected token (7:155)
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.
| import { getSelectedSourceTabFile } from "./url-state";
| export const getSources = state => state.sources;
> export const getSelectedSourceTabSource = createSelector(getSources, getSelectedSourceTabFile, (sources, file) => sources.find(item => item.file === file)?.status);
 @ ./src/selectors/index.js 13:0-26 13:0-26 23:0-37 34:2-9
 @ ./src/utils/window-console.js
 @ ./src/index.js
 @ multi ./src/index

[julienw]

I believe the problem is with webpack 4. Webpack 5 supports this operator properly (because it uses a newer version of acorn, which parses this syntax). So to support this, we need to upgrade to webpack 5 (#3124). But before that we have to change our service worker implementation (#3272).

Soooo that’s a little bit of work 😃

[VishakhBhat]

@julienw the PR build failed because of the optional chaining character, but the flow(yarn flow) is fine.

Does that mean we have issue here ?