worker.start() fails if there is no process or process.env

[thehuijb]

Describe the bug

msw is not working with the latest version, it works if I revert back to 0.25.
apparently a process.env variable is needed, and I do not have one.

Environment

• msw: 0.26.2

Please also provide your browser version.
latest Chrome

To Reproduce

Steps to reproduce the behavior:
worker.start() fails with following error:

Uncaught ReferenceError: process is not defined
    at graphql-deps.js:790
    at browser.js:8

inspection shows the that process is required, see this part of the code found in graphql-deps.js at line 790:

/**
 * A replacement for instanceof which includes an error warning when multi-realm
 * constructors are detected.
 */
// See: https://expressjs.com/en/advanced/best-practice-performance.html#set-node_env-to-production
// See: https://webpack.js.org/guides/production/
var instanceOf = process.env.NODE_ENV === 'production' ? // istanbul ignore next (See: 'https://github.com/graphql/graphql-js/issues/2317')
// eslint-disable-next-line no-shadow
function instanceOf(value, constructor) {
  return value instanceof constructor;
} : // eslint-disable-next-line no-shadow
function instanceOf(value, constructor) {
  if (value instanceof constructor) {
    return true;
  }

  if (value) {
    var valueClass = value.constructor;
    var className = constructor.name;

    if (className && valueClass && valueClass.name === className) {
      throw new Error("Cannot use ".concat(className, " \"").concat(value, "\" from another module or realm.\n\nEnsure that there is only one instance of \"graphql\" in the node_modules\ndirectory. If different versions of \"graphql\" are the dependencies of other\nrelied on modules, use \"resolutions\" to ensure only one version is installed.\n\nhttps://yarnpkg.com/en/docs/selective-version-resolutions\n\nDuplicate \"graphql\" modules cannot be used at the same time since different\nversions may have different capabilities and behavior. The data from one\nversion used in the function from another could produce confusing and\nspurious results."));
    }
  }

  return false;
};

Expected behavior

I would expect the mocking to work as it did with version 0.25
using a serviceworker on a web project, I would not expect to need process.env.

[LarsDenBakker]

It would be great if we can use the library in the browser without pre-transforming it, or having to set window.process = { env: 'development' } as a global variable.

[kettanaito]

Hi, @thehuijb. Thanks for reporting this. Can you please share a repository where this issue happens? I can't seem to reproduce it using a React application, so the more I know about your setup the better.

[KonnorRogers]

@kettanaito I just encountered this issue today working with @LarsDenBakker 's web-dev-server. The issue is that its expecting process.env which Webpack will happily fill for you, but @web/dev-server will not fill this for you.

Heres the simplest reproduction repo I could make:

https://github.com/ParamagicDev/msw-process-env-issue

[kettanaito]

Hey, @ParamagicDev. Thank you for preparing the repo!

So it sounds like the end build contains process.env references, which different bundlers treat differently. I've tested this mainly on webpack-based projects (CRA/NextJS), looks like that's the reason I couldn't reproduce the issue.

That's an intricate one: we don't use process.env explicitly, it's being injected by one of the dependencies we use.

[LarsDenBakker]

Web dev server doesnt actually run any build at all, it picks up the es module distribution and serves it to the browser as is. Since process is a node js global, it wont work in the browser.