nuxt: Nuxt cloudflare-pages deployment fails

You’re saying that this error is caused by vite, and the fact that globalThis.process.env.NODE_ENV is not a syntax that vite supports by default ?

Yupp, I am saying that somewhere in your toolchain, you simply replace a string in your JavaScript without checking if it is a full expression - which is extremely dangerous, as the output of a simple string replacement on JavaScript code is not neccesarily JavaScript code.

I’m not a nuxt user myself, but if this only gets changed over at graphql, the next library is bound to ship code and break things again.

It seems that you are using the rollup replace plugin, which has a delimiters option that you can adjust to make sure this doesn’t happen.
Witout trying it, I believe changing the left delimiter from \b to (?<!\.)\b should help here, so you’d end up with delimiters: ['(?<!\\.)\\b', '\\b(?!\\.)']

Maybe you could even bring that up with rollup? It seems like a sane default to see if there is not only a word-boundary, but also no dot preceeding that. 🙂

I’m not sure why, but it looks like globalThis is not supported with some nitro presets. You can work around the issue it by patching this line in node_modules/graphql/jsutils/instanceOf.mjs

Replace this line :

globalThis.process && globalThis.process.env.NODE_ENV === 'production'

with this line :

process && process.env.NODE_ENV === 'production'

It’s easier if you use pnpm or yarn because of patch support. If you’re using npm, use https://github.com/ds300/patch-package.

You can also use nitropack update in package.json as in the example below.

Checked for operation and no problems for several weeks in production 😉

    "pnpm": {
	"overrides": {
	    "nitropack": "npm:nitropack-edge@2.6.0-28142855.f0d0d91"
	}
    }

@Hebilicious I believe this might actually be on the Nuxt side.

The error message likely shows the unminified code - and the problem lies in the minified code. At least with vite, this transformation happens:

-globalThis.process.env.NODE_ENV
+globalThis."production"

Which would explain the error message of "Unexpected token", which you would not get only because a variable name like process or globalThis would not exist.

Thanks for chiming in @phryneas.

You’re saying that this error is caused by vite, and the fact that globalThis.process.env.NODE_ENV is not a syntax that vite supports by default ?

Looking at vite code, it looks like this should work : https://github.com/vitejs/vite/pull/12194

---globalThis.process.env.NODE_ENV
+++"production"

There’s definitely something strange happening, I’ll investigate a little further.

Edit :

in dist/_nuxt/entry.hash.js the output looks fine, so this must happens on the Nitro build further down the line.

  /* c8 ignore next 6 */
  // FIXME: https://github.com/graphql/graphql-js/issues/2317
  globalThis.process && true ? function instanceOf2(value, constructor) {
    return value instanceof constructor;
  } : function instanceOf3(value, constructor) {
    if (value instanceof constructor) {
      return true;
    }

My best guess would be that the rollup custom replace logic happening there doesn’t work with globalThis.process.env.NODE_ENV

Edit 2: I made a PR with a fix in the upstream Nitro repository.

@Hebilicious I believe this might actually be on the Nuxt side.

The error message likely shows the unminified code - and the problem lies in the minified code. At least with vite, this transformation happens:

-globalThis.process.env.NODE_ENV
+globalThis."production"

Which would explain the error message of "Unexpected token", which you would not get only because a variable name like process or globalThis would not exist.

It works using pnpm with its patch function. Thank you very much @Hebilicious !

Thank you @Hebilicious, I used yarn patch to replace the line and now it works!