RollupError when using Nuxt 3.13.1 with Nuxt 4 compatibility mode

[vernaillen]

So far the nuxt-graphql-middleware module was working fine in Nuxt 4 compatibility mode, but after upgrading to Nuxt 3.13.1 the following error occurs during nuxi build:

[nitro 8:24:16 AM]  ERROR  RollupError: playground/node_modules/.cache/nuxt/.nuxt/graphqlMiddleware.serverOptions.ts (2:12): Expected ',', got '{' (Note that you need plugins to import files that are not JavaScript)


1: 
2: import type { GraphqlMiddlewareServerOptions } from '../../../../../src/types'
               ^
3: const serverOptions: GraphqlMiddlewareServerOptions = {}
4: import type { GraphqlServerResponse } from '#graphql-middleware/types'


 ERROR  playground/node_modules/.cache/nuxt/.nuxt/graphqlMiddleware.serverOptions.ts (2:12): Expected ',', got '{' (Note that you need plugins to import files that are not JavaScript)                8:24:16 AM

  at getRollupError (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:392:41)
  at ParseError.initialise (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:11494:28)
  at convertNode (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13192:10)
  at convertProgram (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:12536:12)
  at Module.setSource (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14355:24)
  at async ModuleLoader.addModuleSource (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19046:13) 



 ERROR  playground/node_modules/.cache/nuxt/.nuxt/graphqlMiddleware.serverOptions.ts (2:12): Expected ',', got '{' (Note that you need plugins to import files that are not JavaScript)                8:24:16 AM

 ELIFECYCLE  Command failed with exit code 1.

I was able to reproduce this by cloning this repo, upgrading the packages and adding this to nuxt.config.ts in the playground:

  future: {
    compatibilityVersion: 4
  },

[vernaillen]

I added a reproduction here: https://github.com/vernaillen/nuxt-graphql-middleware-rolluperror Also added srcDir: './' to make the app work with "npm run dev"

The build error occurs when running "npm run dev:build"

[madebyfabian]

Having the exact same error trying to deploy on Vercel

[vernaillen]

I managed to install on Vercel and Coolify by using this as build command:

npx nuxi cleanup && rm -rf .nuxt && pnpm build

The issue seems to be caused by the new buildCache feature introduced in Nuxt 3.13.1 and I have the impression this feature can't be disabled when using Nuxt 4 compatibility mode. The above command removes the build cache created by previous deployment(s)

[dulnan]

So this seems to be due to the new "app" folder structure. I wonder how Nuxt 4 works with the previous "app/router.options.ts" file? But it seems that there is still no official way for module authors to implement "runtime options that are functions". I'll have to see what the solution here is.

[madebyfabian]

@dulnan Thanks for looking into it. If it helps, I also get this error when not using the new app folder structure. So I still have everything like pages, utils, layouts etc on my root and then a app/graphqlMiddleware.serverOptions.ts file.

The Nuxt 4 Upgrade Docs at https://nuxt.com/docs/getting-started/upgrade#new-directory-structure state, that Nuxt 4 looks for the router.options.ts file in the new app directory root, so the path is still app/router.options.ts

[dulnan]

I think I've already found a way to fix it. Looking at the upgrade guide, with Nuxt 4 the correct place to put the file would be in ./server/graphqlMiddleware.serverOptions.ts, because app is exclusively for "Nuxt App" stuff (and the serverOptions are only ever used in a Nitro context, so they actually do belong there). That should likely also give DX improvements because currently you "can use" Nuxt composables in this file (according to TypeScript), but it would fail in runtime because these composables are not actually auto imported. I will probably change the expected path to be in ./server in an upcoming release, which should then fix this issue here as well.

Backwards compatibility should also be possible I think. Let's see

[blqke]

Went into a similar issue where schemaPath: 'server/linear/schema.graphql' was resolving to app/server/linear/schema.graphql

I also believe most of the configurable files paths should use serverDir instead of srcDir .

Had the same problem in an other nuxt module and it was retrocompatible with nuxt 3

[dulnan]

Started working on adding Nuxt 4 compatibility. The bug mentioned in this issue has been resolved: I'm now generating two separate templates (.mjs and .d.ts) instead of a single template (.ts), the latter is what causes the rollup build error. And it seems this just happened to work previously and is not really supported.

@blqke Indeed the paths should not resolve via srcDir. You mentioned serverDir instead. I guess for the graphqlMiddleware.options.ts file using the server dir makes sense, since the file is exclusively used in a server context. However, for schemaPath or autoImportPatterns, the rootDir would likely make more sense. WDYT?

[blqke]

Started working on adding Nuxt 4 compatibility. The bug mentioned in this issue has been resolved: I'm now generating two separate templates (.mjs and .d.ts) instead of a single template (.ts), the latter is what causes the rollup build error. And it seems this just happened to work previously and is not really supported.

@blqke Indeed the paths should not resolve via srcDir. You mentioned serverDir instead. I guess for the graphqlMiddleware.options.ts file using the server dir makes sense, since the file is exclusively used in a server context. However, for schemaPath or autoImportPatterns, the rootDir would likely make more sense. WDYT?

Yes I agree, it make sense, people should have the ability to store .gql near .vue if they want cf https://github.com/dulnan/nuxt-graphql-middleware/blob/d3f7dc62cb5acb8683411416ed300acceeacff78/docs/configuration/full-example.md?plain=1#L38

[dulnan]

I've tested it in several of my own projects (without compatibilityVersion: 4) to make sure it doesn't break existing setups. The module's playground uses compatibilityVersion: 4 where it also works fine. With the upcoming release the default path for the server options file will be <serverDir>/graphqlMiddleware.serverOptions.ts, however the module still checks for the legacy path in app for backwards compatibility. In addition the alias/resolving has been cleaned up, so you should be able to use schemaPath: 'server/schema.graphql' or schemaPath: '~/schema.graphql' and it will resolve correctly. Same is true for autoImportPatterns.