The error Uncaught ReferenceError: process is not defined may happen when the code tries to get access to the process object that provides information about, and control over, the current Node.js process. process object doesn’t exist in the browser environment so anything that doesn’t check if process global object exists before accessing it will throw an error. I got this when upgraded the Bootstrap framework and inside the package, Popover started failing with the above issue.

I’ve made some research and seems this issue is being observed in other apps as well. There are various solutions to that and it’s even sometimes a custom approach when you use specific tools like Webpack or Rollup.

Global solution

Here is how I’ve resolved that. Put this code before all other code is running.

// @ts-ignore:next-line
if (typeof process === 'undefined') {
  Object.defineProperty(
    this,
    'process',
    {
      value: {
        env: {
          NODE_ENV: 'production'
        }
      },
      writable: true
    });
}

Note #1: that the line // @ts-ignore:next-line is specific for TypeScript and allow to ignore next line during validation before compilation.

Note #2: instead of this it is preferable to use globalThis. If you want to use globalThis here is the polyfill:

if (typeof globalThis === 'undefined') {
  // eslint-disable-next-line no-extend-native
  Object.defineProperty(Object.prototype, '__magic__', {
    configurable: true,
    get: function () {
      return this;
    }
  });

  /* @ts-ignore */
  __magic__.globalThis = __magic__;

  /* @ts-ignore */
  delete Object.prototype.__magic__;
}

Comments

You can leave a response, or trackback from your own site.

Before you add comment see for rules.

Leave a Reply

Your email address will not be published.

8y7a2h