Reference error: process is not defined

[matmill5]

I am trying to load floating-ui/react@0.26.12 as a systemjs formatted module from a jspm.io CDN, as floating-ui/react is a dependency @mantine/core.

Unfortunately, the systemjs formatted floating-ui/react module is throwing a reference error related to 'process' not being defined.

See below:

ERROR
process is not defined
ReferenceError: process is not defined
    at Object.execute (https://ga.system.jspm.io/npm:@floating-ui/react@0.26.12/dist/floating-ui.react.mjs:1:56708)

I think the fix may be to use a pollyfill for process or a webpack define plugin, to remove references to process. As I understand it, 'process' should only be references in a nodejs environment, not in the browser.

This probably isn't an issue for most users as they are bundling floating-ui into their react app as part of a build-time process, but we are loading the module at runtime.

In fact, I see rollup is being used here: https://github.com/floating-ui/floating-ui/blob/master/packages/react/rollup.config.mjs

And it looks like the output configuration is set to not support browsers.

https://github.com/floating-ui/floating-ui/blob/master/config/src/defineRollupConfig.mts#L141

^ Yeah, see above, it reads like rollup won't bundle a browser-compatible version of the floating-ui library, as the config is set to false; please advise.

[atomiks]

The UMD distribution file supports browsers, but not the ESM ones. Can I ask why you're not using a build step with React? Is it only a developer test env where tree-shaking/dead code elimination isn't a problem? Because the bundle size would be huge.

As a workaround, you can shim process.env in your HEAD tag before the scripts run so it won't error at runtime.

[matmill5]

From the jspm.io CDN the floating-ui minified artifact is 64kb, so not horribly huge (?).
https://ga.system.jspm.io/npm:@floating-ui/react@0.26.12/dist/floating-ui.react.mjs

Let me try a shim in the HEAD tag; thank you.

[atomiks]

I think most React libraries assume you're in a build step where process.env is replaced by a bundler. This allows us to add warning/error messages without affecting the production bundle size. Trying to guard for process ends up breaking DCE in many bundlers and the other solutions aren't fully foolproof like esm-env either IIRC. So shimming is the easiest solution.