[BUG] @bokeh/bokehjs@2.3.0 breaks babel compile

[alexanderhupfer]

FOLLOW THESE INSTRUCTIONS CAREFULLY

ISSUES THAT DO NOT CONTAIN NECESSARY INFORMATION MAY BE CLOSED, IMMEDIATELY

The issue tracker is NOT the place for general support. For questions and technical assistance, come join the Bokeh Project Discourse.

For defects or deficiencies, please provide ALL OF THE FOLLOWING:

ALL software version info (bokeh, python, notebook, OS, browser, any other relevant packages)

Environment Info:

current version of create-react-app: 4.0.1
running from /Users/sonium/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

"@bokeh/bokehjs": "2.3.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"

System:
OS: macOS 11.2.1
CPU: (8) x64 Apple M1
Binaries:
Node: 15.8.0 - ~/.nvm/versions/node/v15.8.0/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.5.1 - ~/.nvm/versions/node/v15.8.0/bin/npm
Browsers:
Chrome: 88.0.4324.192
Edge: Not Found
Firefox: Not Found
Safari: 14.0.3
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.3 => 4.0.3
npmGlobalPackages:
create-react-app: Not Found

Description of expected behavior and the observed behavior

Complete, minimal, self-contained example code that reproduces the issue

Create-React-App + https://gist.github.com/sonium0/2c9ec81c4fd25ce2515872cf64df7000

Stack traceback and/or browser JavaScript console output

This works with @bokeh/bokehjs@2.2.3, but breaks with 2.3.0:

./node_modules/@bokeh/bokehjs/build/js/lib/core/dom.js 142:23
Module parse failed: Unexpected token (142:23)
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 function matches(el, selector) {
|   const p = Element.prototype;
>   const f = p.matches ?? p.webkitMatchesSelector ?? p.mozMatchesSelector ?? p.msMatchesSelector;
|   return f.call(el, selector);
| }

Screenshots or screencasts of the bug in action

[mattpap]

You need to configure your build, so that babel understands nullish coalescing operator, e.g. use https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator, or similar.

[bryevdv]

@mattpap perhaps we can start publishing the necessary configurations for a few common build scenarios?

[mattpap]

That's quite a bit of work for us (build, publishing, etc.), whereas it's one line of code for users to enable support for ?? in their builds. Sadly babel doesn't support this by default, mostly because they are far behind with 8.0 release, that is suppose to catch up with ES2020. Right now everyone else supports this, including all modern browsers, nodejs, etc. It's not that we are using some experimental feature.

[bryevdv]

@mattpap "publishing" might not have been the best word choice. I mean perhaps we can can create some toy examples that bundle BokehJS in various common ways. These could be maintained under test, and also serve as a reference/documentation for users with questions about what steps are necessary.

Edit: e.g. an examples/bokehjs directory which tbh seems like something we ought to have had for awhile

[bryevdv]

I've made #10962 to track this task.

[alexanderhupfer]

Thanks everybody for their kind support.

I have tried adding the mentioned babel plugin, and in my App.js the code {null ?? 'test'} works as expected, however on the BokehJS side the problem remains...