zipkin-js doesn't work with last versions of create-react-app (react-scripts) 5 or webpack 5

[ilya-evseev]

The reason is webpack 5 doesn't include any polyfills for node.js core modules anymore. At the same time, Zipkin's es/index.js imports two node core modules, os and url:

import os from 'os';
import url from 'url';

So, no way to use zipkin + webpack 5 in browser out of the box, without additional preparations. For create-react-app, you should eject to set up fallback polyfills in webpack config manually or use additional packages like in one of the ways that is described here: How to polyfill node core modules in webpack 5. But again, as zipkin-js is suitable for browser use, it'd be good if it worked out of the box. Maybe include some polyfills in dependecies, or add some options to config to inject polyfilled versions of os and url

To reproduce:

1. Create a new react app with create-react-app or configure your build manually using webpack v.5+
2. yarn add zipkin
3. try to configure zipkin for browser, e.g. like here zipkin-instrumentation-axiosjs
4. yarn start

Actual result:

Compiled with problems:
ERROR in ./node_modules/zipkin/es/index.js 1:0-20
Module not found: Error: Can't resolve 'os' in '.../node_modules/zipkin/es'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
    - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "os": false }

ERROR in ./node_modules/zipkin/es/index.js 2:0-22
Module not found: Error: Can't resolve 'url' in '.../node_modules/zipkin/es'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
    - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "url": false }