graphql-js: Syntax error in Nuxt project due to graphql-js pull request #3887
Hi
It looks like https://github.com/graphql/graphql-js/pull/3887 is causing problems in my Nuxt project. When compiled, there is a syntax error which breaks the app completely:
((_globalThis$process = globalThis.process) === null || _globalThis$process === void 0 ? void 0 : _globalThis$"development") === "production" ? function instanceOf2(value, constructor) {
return value instanceof constructor;
}
v16.6.0 works perfectly.
I cannot verify if this is only a problem when used with Nuxt or not.
- Operating System: Darwin
- Node Version: v18.16.1
- Nuxt Version: 3.5.3
- Nitro Version: 2.5.0
- Package Manager: yarn@1.22.19
- Builder: vite
- User Config: app, runtimeConfig, tailwindcss, components, modules, auth, devtools, formkit, postcss, vite, build
- Runtime Modules: @nuxtjs/tailwindcss@6.8.0, @vueuse/nuxt@10.2.0, @sidebase/nuxt-auth@0.6.0-beta.2, @formkit/nuxt@0.17.3, nuxt-graphql-client@0.2.27, @pinia/nuxt@0.4.11, @nuxt/devtools@0.6.2
- Build Modules: -
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 9
- Comments: 20 (2 by maintainers)
Commits related to this issue
- instanceOf: workaround bundler issue with `process.env` Fixes: #3919 #3920 #3921 Context: #3887 changed code and introced optinal chaining. `globalThis.process?.env.NODE_ENV` is transpiled into ``` (... — committed to graphql/graphql-js by IvanGoncharov a year ago
- instanceOf: workaround bundler issue with `process.env` (#3923) Fixes: #3919 #3920 #3921 — committed to graphql/graphql-js by IvanGoncharov a year ago
- Work around graphql bug by downgrading npm Ref. https://github.com/graphql/graphql-js/issues/3919 — committed to scj2000/scj2000-web-v2 by quintusl a year ago
Experiencing the same issue in a React 18 + Vite 4.1 project. Updating Vite to >=4.2 solves the issue regardless of the graphql version
Running into the same issue with quasar 2.12.2 / vite.
Not sure if it is an issue if bundlers replace
process.env.NODE_ENV. I would expect the bundlers to do this.I created a very simple workarround:
Just change
globalThis.process.env.NODE_ENV === 'production'to
globalThis.process.env['NODE_ENV'] === 'production'and everything works fine because nothing is replaced unexpectedly.
For an instant fix you can run
sed "s/process\.env\.NODE_ENV/process.env['NODE_ENV']/g" ./instanceOf.mjsmanually or use this script
in your build-pipline.
Don´t forget to delete the build-cache after patching the file, in my case
rm -rf node_modules/.q-cache/does the job.Aha, I see what you’re saying. That makes sense indeed. I imported the module in a browser to check for syntax errors, and when I saw none I assumed that the code was correct, but didnt actually verify the logic.
That would mean the issue is likely somewhere in the buildtooling that graphql uses internally. I try to see if I can figure out where exactly this is going wrong.
@razorness For that, you need to define
NODE_ENVtoproduction(done by default in most of bundlers).The problem hits only Quasar. 😦 Vuertify3 which uses also Vite has no problem with that. Quasar fails miserably on that line:
import gql from “graphql-tag”;
Hacking node_module? It’s not the best idea.
@okaufmann It’s an issue with Nuxt internals, but I added a workaround for it in
16.7.1Can you please confirm that it is fixed?I ran into the same issue in a vite / vue / ts project after upgarding from
16.6.0to16.7.0. Unfortunately I’m not able to reproduce the issue in a fresh project. So I’m not sure which combination of libs or tool is the reason for this error.I’m using node v18.14.0, yarn 1.22.19, vite 4.3.9, vue 3.3.4, typescript 5.1.3, vue-tsc 1.8.1, @esbuild-plugins/node-globals-polyfill 0.2.3, @esbuild-plugins/node-modules-polyfill 0.2.2, and many more …
The issue only appears if I run the application in dev mode. The production build works fine. 🤔