[error] [nitro] RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)

[DidoMarchet]

Environment

• Operating System: Darwin
• Node Version: v18.16.0
• Nuxt Version: 3.6.2
• Nitro Version: 2.5.2
• Package Manager: npm@9.5.1
• Builder: vite
• User Config: apollo, app, build, css, devtools, i18n, modules, nitro, experimental, runtimeConfig, sitemap, ssr, vite
• Runtime Modules: @nuxtjs/i18n@8.0.0-beta.13, nuxt-simple-sitemap@2.7.0, @nuxtjs/apollo@5.0.0-alpha.6
• Build Modules: -

Describe the bug

Hi guys! I'm trying to deply in netlify with presets netlify-edge and netlify-builder. It works. But if I add the module @nuxtjs/apollo it return me this error:

3:18:03 PM: [error] [nitro] RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)
3:18:03 PM: 10:   /* c8 ignore next 6 */
3:18:03 PM: 11:   // FIXME: https://github.com/graphql/graphql-js/issues/2317
3:18:03 PM: 12:   globalThis.process && globalThis.process.env.NODE_ENV === 'production'
3:18:03 PM:                                        ^
3:18:03 PM: 13:     ? function instanceOf(value, constructor) {
3:18:03 PM: 14:         return value instanceof constructor;
3:18:03 PM: [error] Unexpected token (Note that you need plugins to import files that are not JavaScript)
3:18:03 PM:   at error (node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
3:18:03 PM:   at Module.error (node_modules/rollup/dist/es/shared/node-entry.js:13584:16)
3:18:03 PM:   at Module.tryParse (node_modules/rollup/dist/es/shared/node-entry.js:14310:25)
3:18:03 PM:   at Module.setSource (node_modules/rollup/dist/es/shared/node-entry.js:13911:39)
3:18:03 PM:   at ModuleLoader.addModuleSource (node_modules/rollup/dist/es/shared/node-entry.js:24439:20)

Expected behaviour

No errors

Reproduction

Install and configure Nuxt Apollo and use it as below:

<template>
  <div>
    {{ data }}
  </div>
</template>

<script>
export default {
  layout: 'default',
}
</script>

<script setup>
const variables = {}
const { data } = await useAsyncQuery(
  gql`
    query MyQuery {
      ping
    }
  `,
  variables
)
</script>

Additional context

No response

Logs

No response

[Aietes]

Please have a look at nuxt/nuxt#21768, it's basically the same issue. The problem will be fixed in nitro soon, in the meantime you can patch the graphql package for a successful deployment. The graphql module tries to access globalThis.process, which makes the deployment fail. Therefore, if you remove the respective code in the graphql module that causes the issue via a patch, e.g. via pnpm, you have a workaround till the root cause is fixed:

pnpm patch graphql
code <generated_folder>

In node_modules/graphql/jsutils/instanceOf.mjs remove the code that tries to access process.

export const instanceOf = function instanceOf(value, constructor) {
  return value instanceof constructor
}

Then apply the patch.

pnpm patch-commit <generated_folder>

The resulting patch should appear in package.json to be applied during deployment.

  "pnpm": {
    "patchedDependencies": {
      "graphql@16.7.1": "patches/graphql@16.7.1.patch"
    }
  }

[DidoMarchet]

Thanks! Kind regards,

Davide

[DidoMarchet]

Hi @Aietes, sorry if I reopen the thread but how ca deploy on Netlify? Because I don't know if it's possible to patch the modules on Netlify.

The issue occurs with the netlify-edge preset. If I use netlify-builderpresent it works ad expected.

Thanks and kind regards,

Davide

[Aietes]

Hi @DidoMarchet , if you patch the library as described above, the pnpm patch functionality takes care of everything automatically. I hope I described the steps well, but there is also a patch documentation with a video.

Patching via this process actually creates a patch folder in your repository, which contains the diff (change) to the library. This change is referenced in your package.json. When you deploy to Netlify, both the patch and the package.json are uploaded to Netflify's server and built on that server. During the build, the changes are applied to the library on the server, exactly like they are applied to your local system. This allows you to fix issues in libraries immediately, so you don't need to wait till the issue is actually patched in a future release of that library.

I'm not using Netlify, but I used this workaround to deploy to Cloudflare pages, which is a very similar edge deployment.

[DidoMarchet]

Perfect, thanks again!