Fix react scripts transpilation issue

[aaraney]

Summary

Transpilation of typescript code fails due to two issues stemming from react-scripts version 3.4.1.

1. react-scripts=3.4.1's babel config does not support nullish coalescing operator (??).
2. react-scripts=3.4.1's babel config does not support export namespace from semantics (i.e. export * as embed from "./embed";)

Issue Description

react-scripts's nullish coalescing operator issue is well described and recounted in create-react-app #9468. The gist is, the currently configured browserslist key in package.json fails because some browsers (<10%) do not support the nullish coalescing operator. See caniuse for the current breakdown. In short, the nullish coalescing operator (??) is supported by > 90% of browsers. ~2.5% of ~10% unsupported browsers are old versions of Chrome and Safari on IOS. I don't see this being a huge issue, but it might be worth mentioning in documentation (if the changes are accepted). However, others may disagree. If that is the case, using react-scripts eject is likely the only viable solution.

create-react-app #9468's proposed solution is to change package.json's browserlist key from this,

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

to this,

"browserslist": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],

I've verified that this change removes the

Failed to compile.

./node_modules/@bokeh/bokehjs/build/js/lib/models/expressions/stack.js 10:35
Module parse failed: Unexpected token (10:35)
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.
| 
|   _v_compute(source) {
>     const n = source.get_length() ?? 0;
|     const result = new Float64Array(n);
|

transpilation error.

However, after changing the browserlist key, an error related to export namespace semantics is raised. See below:

Failed to compile.

./node_modules/@bokeh/bokehjs/build/js/lib/index.js 3:9
Module parse failed: Unexpected token (3:9)
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.
| export { version } from "./version";
| export { index } from "./embed";
> export * as embed from "./embed";
| export * as protocol from "./protocol";
| export * as _testing from "./testing";

I tried bumping the react-scripts version to 3.4.4, but the error persisted. However, bumping react-scripts to 4.0.3 resolved the issue. Here are the create-react-app v4.X change logs. At a glance, I did not see anything referencing adding support for export namespace's, so I assume it is a product of a downstream babel plugin update.

Recreate

1. clone repo
2. git checkout a67ca746960ab13e40cc660a8b53d6fa792c0582
3. cd streamlit_bokeh_events/frontend/
4. rm package-lock.json
5. yarn
6. yarn start

Changes

• browser target constraints lessened to avoid nullish coalescence issue. some browsers are no
  longer supported. see caniuse
  to see if you are affected.
• react-scripts version bumped to 4.0.3.
• package-lock.json removed and no longer tracked.

[aaraney]

pinging @Castronova so you are in the loop.

[ash2shukla]

Thanks and apologies for enormous delay.