Error in the browser console when -> import { setupWorker } from 'msw'

[ftorrens]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 14 or higher

Node.js version

v19.7.0

Reproduction repository

no exists

Reproduction steps

Just import this library
import { setupWorker } from 'msw'

Current behavior

In the chrome console show this error:

msw.js?v=fae9f746:6010 Uncaught SyntaxError: Unexpected string

The error line is:

instanceOf = globalThis.process && globalThis."development" === "production" ? function instanceOf2(value, constructor) {

Expected behavior

Load the library normally

[ftorrens]

I was normally using this library in my project and when I update the dependencies it starts giving me this error. I would be very grateful if it could be solved

[oidualc]

Duplicate of #1643

[ftorrens]

Thanks for your reply. I am not using the graphql-js library. In any case, I have installed it with version v16.7.1 and the problem persists. Iam missing something to do? Greetings

[oidualc]

Unfortunately even if you don't use graphql, it's bundled in the msw library anyways. That line comes from the graphql-js package, and the issue was supposedly fixed in this very version, but if you are still experiencing this issue it might not be fully fixed and should probably be reported directly in the graphql-js repo. Can you share a minimal public repo to replicate the bug?

[ftorrens]

Hi, I have prepared a small demo modifying my project, from here you can see the error.

1- Clone or download the project

2- run npm i

3- run npm run dev

Demo:
https://github.com/ftorrens/errorMSW

Thanks a lot

[oidualc]

Thank you, this has been reported on graphql/graphql-js#3918 and happens because of graphql/graphql-js#3925. There is already a Pull Request pending graphql/graphql-js#3927 that should fix the issue, at this point the only thing to do is to downgrade graphql to v16.6.0 or wait for a patch release.

[ftorrens]

Thank you very much for your quick response. I will be using version 16.6.0 until the bug is fixed. Very thankful.

[kettanaito]

Thanks for reporting this!

As stated above, the issue seems to be caused by a transient dependency of MSW—the graphql package. Respectively, it should be addressed there. Meanwhile, pin the version of graphql to 16.6.0 and wait for the fix to be released. Thanks!

[asantTMC]

Thanks for reporting this!

As stated above, the issue seems to be caused by a transient dependency of MSW—the graphql package. Respectively, it should be addressed there. Meanwhile, pin the version of graphql to 16.6.0 and wait for the fix to be released. Thanks!

Installed graphql 16.6.0 but the issue still remains

EDIT: upgraded to 16.7.1 as well as 16.8.0, still getting the same issue

[doox911-opensource]

The problem is not solved. I tried different versions of graphql - the error persists.

[mattcosta7]

The problem is not solved. I tried different versions of graphql - the error persists.

graphql/graphql-js#3918 (comment)

this issue lies in graphql-js, and there's not much we can do about it here, but using @rollup/plugin-replace to replace the offending code should work in your vite or rollup config. If you aren't using those, another similar build tool should do the same.

 replace({
      preventAssignment: true,
      "globalThis.process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    }),

[doox911-opensource]

The problem is not solved. I tried different versions of graphql - the error persists.

graphql/graphql-js#3918 (comment)

this issue lies in graphql-js, and there's not much we can do about it here, but using @rollup/plugin-replace to replace the offending code should work in your vite config

 replace({
      preventAssignment: true,
      "globalThis.process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    }),

I use quasar 2 and It didn't help...

/* eslint-env node */
const replace = require('@rollup/plugin-replace')
const { configure } = require('quasar/wrappers')
const path = require('path')

module.exports = configure(function(/* ctx */) {
  return {
    // default settings
    build: {
      // other settings
      plugins: [
        replace({
          preventAssignment: true,
          'globalThis.development': JSON.stringify(process.env.NODE_ENV),
          // or 
         'globalThis.process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        }),
      ]
    },

  // other settings
  }
})

[mattcosta7]

The problem is not solved. I tried different versions of graphql - the error persists.

graphql/graphql-js#3918 (comment)
this issue lies in graphql-js, and there's not much we can do about it here, but using @rollup/plugin-replace to replace the offending code should work in your vite config

 replace({
      preventAssignment: true,
      "globalThis.process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    }),

I use quasar 2 and It didn't help...

/* eslint-env node */
const replace = require('@rollup/plugin-replace')
const { configure } = require('quasar/wrappers')
const path = require('path')

module.exports = configure(function(/* ctx */) {
return {
// default settings
build: {
// other settings
plugins: [
replace({
preventAssignment: true,
'globalThis.development': JSON.stringify(process.env.NODE_ENV),
// or
'globalThis.process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
]
},

// other settings
}
})

I've never heard of quasar, but a quick search of issues in quasar shows

• Unexpected String with graphql package quasarframework/quasar#16060 (comment)

build: {
  rawDefine: {
    'globalThis.process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
}

..or

build: {
      extendViteConf(viteConf) {
        viteConf.define = {
          'globalThis.process.env.NODE_ENV': JSON.stringify(
            process.env.NODE_ENV
          ),
          'process.env.NODE_ENV': JSON.stringify(
            process.env.NODE_ENV
          ),
        };
      },
}