upgrading to react-script 3.4.3 breaks optional chaining

[nodece]

Describe the bug

Cannot compile when using optional chaining.

./node_modules/casbin/lib/esm/model/model.js 158:32
Module parse failed: Unexpected token (158:32)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   async buildIncrementalRoleLinks(rm, op, sec, ptype, rules) {
|     if (sec === 'g') {
>       await this.model.get(sec)?.get(ptype)?.buildIncrementalRoleLinks(rm, op, rules);
|     }
|   } // buildRoleLinks initializes the roles in RBAC.

same issue: #8445

The current temporary solution: #8445 (comment)

Did you try recovering your dependencies?

rm -rf node_modules
rm yarn.lock

Environment

 create-react-app --info

Environment Info:

  current version of create-react-app: 3.4.1
  running from /Users/nodece/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.18.4 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 68.9.0
    Safari: 13.1.1
  npmPackages:
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-scripts: 3.4.3 => 3.4.3 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

npm install -g create-react-app
create-react-app my-app --typescript
cd my-app
npm install --save casbin

then add the following code to your project:

import {newEnforcer,newModelFromString,StringAdapter} from 'casbin';

const m = newModelFromString(`
[request_definition]
r = sub, obj, act

[policy_definition]
p = sub, obj, act

[role_definition]
g = _, _

[policy_effect]
e = some(where (p.eft == allow))

[matchers]
m = g(r.sub, p.sub) && r.obj == p.obj && r.act == p.act
`)

const a = new StringAdapter(`
p, alice, data1, read
p, bob, data2, write
p, data2_admin, data2, read
p, data2_admin, data2, write
g, alice, data2_admin
`)

newEnforcer(m,a).then(async e=>{
  console.log(await e.enforce('alice','data2','read'))
}).catch(console.error)

run npm start

./node_modules/casbin/lib/esm/model/model.js 158:32
Module parse failed: Unexpected token (158:32)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   async buildIncrementalRoleLinks(rm, op, sec, ptype, rules) {
|     if (sec === 'g') {
>       await this.model.get(sec)?.get(ptype)?.buildIncrementalRoleLinks(rm, op, rules);
|     }
|   } // buildRoleLinks initializes the roles in RBAC.

Reproducible demo

https://github.com/ravikumarjs-foyernet/rbac

[nrmisturakJPMC]

I am also experiencing this. Any workaround that doesn't involve adjusting browserlist.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.