Unexpected String with graphql package

[idc77]

What happened?

Please see https://github.com/graphql/graphql-js/issues/3919

Uncaught SyntaxError: Unexpected string (at VM222 chunk-5MV57P5J.js:1237:51)

// node_modules/graphql/jsutils/instanceOf.mjs
var instanceOf = globalThis.process && globalThis."development" === "production" ? function instanceOf2(value, constructor) {
  return value instanceof constructor;
} : function instanceOf3(value, constructor) {
  if (value instanceof constructor) {
    return true;
  }
  if (typeof value === "object" && value !== null) {
    var _value$constructor;
    const className = constructor.prototype[Symbol.toStringTag];
    const valueClassName = Symbol.toStringTag in value ? value[Symbol.toStringTag] : (_value$constructor = value.constructor) === null || _value$constructor === void 0 ? void 0 : _value$constructor.name;
    if (className === valueClassName) {
      const stringifiedValue = inspect(value);
      throw new Error(`Cannot use ${className} "${stringifiedValue}" from another module or realm.

What did you expect to happen?

No error

Reproduction URL

N/A

How to reproduce?

not sure have graphql package >16.6.0 installed I guess, from what I gather in the Nuxt issue when I downgraded to 16.6.0 the error went away. I don't know how to force quasar to use Vite v4.

How do I upgrade to Vite v4?

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

No response

Quasar info output

Operating System - Linux(6.4.2-arch1-1) - linux/x64
NodeJs - 18.16.0

Global packages
  NPM - 9.7.2
  yarn - 1.22.19
  @quasar/cli - 2.2.1
  @quasar/icongenie - 3.1.0
  cordova - You have been opted out of telemetry. To change this, run: cordova telemetry on.
12.0.0 (cordova-lib@12.0.1)

Important local packages
  quasar - 2.12.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.4.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.3.4 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.4
  pinia - 2.1.4 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.44.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  redacted

Relevant log output

Uncaught SyntaxError: Unexpected string (at VM222 chunk-5MV57P5J.js:1237:51)

Additional context

using quasar with apollo graphql client

{
  "name": "exyuql",
  "version": "0.0.1",
  "description": "ExYu",
  "productName": "ExYu",
  "author": "redacted",
  "private": true,
  "scripts": {
    "dev": "quasar dev",
    "lint": "eslint --ext .js,.vue ./",
    "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@apollo/client": "^3.7.17",
    "@dsb-norge/vue-keycloak-js": "^2.4.0",
    "@quasar/extras": "^1.16.5",
    "@vue/apollo-composable": "^4.0.0-beta.8",
    "date-fns": "^2.30.0",
    "graphql": "^16.7.1",
    "graphql-tag": "^2.12.6",
    "pinia": "^2.1.4",
    "quasar": "^2.12.2",
    "vue": "^3.3.4",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^7.0.0",
    "@quasar/app-vite": "^1.4.3",
    "autoprefixer": "^10.4.14",
    "dotenv": "^16.3.1",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-vue": "^9.15.1",
    "postcss": "^8.4.25",
    "prettier": "^3.0.0"
  },
  "engines": {
    "node": "^18 || ^16 || ^14.19",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

[github-actions[bot]]

Hi @idc77! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[yusufkandemir]

How do I upgrade to Vite v4?

See #14077

[mainstreetmark]

I am having the same issue. I can't seem to get rid of it.

What was the solution?

[ricar2ce]

same error from here :(

[WulfP]

See my solution here: https://github.com/graphql/graphql-js/issues/3919#issuecomment-1633673123

[shengzhou1216]

Here is my solution:

Set define configuration in quasar.config.js > build > extendViteConf:

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

• define : Define global constant replacements. Entries will be defined as globals during dev and statically replaced during build.

[jedikah]

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

Thanks, this worked well for me

[FCnski]

Here is my solution:

Set define configuration in quasar.config.js > build > extendViteConf:

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

• define : Define global constant replacements. Entries will be defined as globals during dev and statically replaced during build.

can confirm this works, has solved my issue as well!

[WulfP]

Here is my solution:

Set define configuration in quasar.config.js > build > extendViteConf:

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

• define : Define global constant replacements. Entries will be defined as globals during dev and statically replaced during build.

Not a solution for me! Pervents values from .env to be accessible via process.env.xxx

[yusufkandemir]

@WulfP use quasar.config file > build.rawDefine:

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

[cdr7508]

Here is my solution:

Set define configuration in quasar.config.js > build > extendViteConf:

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

• define : Define global constant replacements. Entries will be defined as globals during dev and statically replaced during build.

thanks! it work

[idc77]

thank you.

rawdefine worked (because I have stuff in .env)

Let's hope this has no long-term implications.

[cdr7508]

thank you.

rawdefine worked (because I have stuff in .env)

Let's hope this has no long-term implications.

Here is my solution, it can keep old env

extendViteConf(viteConf) {
  viteConf.define['globalThis.process.env.NODE_ENV'] =
    viteConf.define['process.env.NODE_ENV'];
  return viteConf;
},

[Mahfuzsds]

this one solved mine

export default defineConfig({
    define: {
        'globalThis.process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    },
});