nx react app gets 'global is not defined'; create-react-app version doesn't

Current Behavior

Uncaught ReferenceError: global is not defined in Chrome when loading application.

Expected Behavior

Page displays syntax colored JSON.

Steps to Reproduce

See https://github.com/dkorz/nx-react-syntax-highlighter to reproduce problem. See https://github.com/dkorz/react-highlighter version that works.

Breakpointing in the create-react-app version shows global defined although it appears not to be window. I can make the nx version work by adding the following lines to polyfill.ts but that doesn’t feel right.

if (!('global' in window)) {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  (window as any).global = window;
}

Note that I got this component from https://github.com/auth0-blog/auth0-react-sample.git that I was converting to nx.

Failure Logs

core.js:221 Uncaught ReferenceError: global is not defined
    at capture (core.js:221)
    at Object.../../../node_modules/refractor/core.js (core.js:5)
    at __webpack_require__ (bootstrap:79)
    at Module.../../../node_modules/react-syntax-highlighter/dist/esm/prism-light.js (prism-light.js:1)
    at __webpack_require__ (bootstrap:79)
    at Module.../../../node_modules/react-syntax-highlighter/dist/esm/index.js (index.js:1)
    at __webpack_require__ (bootstrap:79)
    at Module.../../../libs/ui/src/lib/highlight/highlight.tsx (highlight.tsx:1)
    at __webpack_require__ (bootstrap:79)
    at Module.../../../libs/ui/src/index.ts (index.ts:1)

Environment

nx : Not Found @nrwl/angular : Not Found @nrwl/cli : 10.1.0 @nrwl/cypress : 10.1.0 @nrwl/eslint-plugin-nx : 10.1.0 @nrwl/express : Not Found @nrwl/jest : 10.1.0 @nrwl/linter : 10.1.0 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/react : 10.1.0 @nrwl/schematics : Not Found @nrwl/tao : 10.1.0 @nrwl/web : 10.1.0 @nrwl/workspace : 10.1.0 typescript : 3.9.7

[m7mdBalboul]

This should fix it,

add webpack.config.js to your app with the following

const nrwlConfig = require("@nrwl/react/plugins/webpack.js"); // require the main @nrwl/react/plugins/webpack configuration function.

module.exports = (config, context) => {
    
  nrwlConfig(config); // first call it so that it @nrwl/react plugin adds its configs, 
 
// then override your config.
  return {
    ...config,
    node: { global: true, fs: 'empty' }, // Fix: "Uncaught ReferenceError: global is not defined", and "Can't resolve 'fs'".
  };
};

then in workspaces.json change webpackConfig in options to "webpackConfig": "apps/your-app/webpack.config.js"

[eldrige]

Here is a work around I found, via stackoverflow. You can this options to your polyfills.ts file for your specific app. `(window as any).global = window;

(window as any).process = { env: { DEBUG: undefined }, }; `