reactstrap typescript nx `Uncaught ReferenceError: global is not defined`

Question

I'm using [email protected] with nx and typescript. But if any component is included from reactstrap the app is crashing with below error

index.js:3 Uncaught ReferenceError: global is not defined
    at Object.../../../node_modules/has-symbols/index.js (index.js:3)
    at __webpack_require__ (bootstrap:79)
    at Object.../../../node_modules/get-intrinsic/index.js (index.js:54)
    at __webpack_require__ (bootstrap:79)
    at Object.../../../node_modules/call-bind/callBound.js (callBound.js:3)
    at __webpack_require__ (bootstrap:79)
    at Object.../../../node_modules/is-arguments/index.js (index.js:4)
    at __webpack_require__ (bootstrap:79)
    at Object.../../../node_modules/deep-equal/index.js (index.js:2)
    at __webpack_require__ (bootstrap:79)

As suggested here tried below configuration in jest.config.js but avail no luck.

module.exports = {
  name: 'cadence',
  preset: '../../jest.config.js',
  transform: {
    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
    '^.+\\.[tj]sx?$': [
      'babel-jest',
      { cwd: __dirname, configFile: './babel-jest.config.json' },
    ],
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  coverageDirectory: '../../coverage/apps/cadence',
  setupFilesAfterEnv: ['./jest.setup.js'],
  target: 'node',
  node: { global: true },
};

Any help will be really appreciated.

Answer 1

I had a similar issue and solved by modifying webpack config - Add webpack.config.js to apps/your-react-app/webpack.config.js with:

const nrwlConfig = require('@nrwl/react/plugins/webpack.js');

module.exports = (config, context) => {
    nrwlConfig(config);

    return {
        ...config,
        node: {
            global: true,
        },
    };
};