Mesh and Sveltekit on Vercel?

[roeeklinger]

if this guide is followed, mesh can run well with Sveltekit:
https://the-guild.dev/graphql/mesh/docs/getting-started/deploy-mesh-gateway#mesh-and-sveltekit

package.json

{
    "name": "supabase-sveltekit",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "build:mesh": "mesh build",
        "serve:mesh": "mesh dev",
        "preview": "vite preview",
        "test": "playwright test",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "test:unit": "vitest",
        "lint": "prettier --plugin-search-dir . --check . && eslint .",
        "format": "prettier --plugin-search-dir . --write ."
    },
    "devDependencies": {
        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "houdini": "^1.2.47",
        "houdini-svelte": "^1.2.47",
        "svelte": "^4.2.7",
        "svelte-check": "^3.6.0",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^5.0.3"
    },
    "type": "module",
    "dependencies": {
        "@graphql-mesh/cli": "^0.90.10",
        "@graphql-mesh/graphql": "^0.98.8",
        "@supabase/auth-ui-shared": "^0.1.8",
        "@supabase/auth-ui-svelte": "^0.2.9",
        "@supabase/ssr": "^0.3.0",
        "@supabase/supabase-js": "^2.42.3",
        "graphql": "^16.8.2",
        "node-libcurl": "^4.0.0"
    }
}

src/routes/api/+server.ts

import { createBuiltMeshHTTPHandler } from '../../../../.mesh'

const meshHttp = createBuiltMeshHTTPHandler()

export { meshHttp as get, meshHttp as post }

after that I can run these commands:

npm run npmbuild:mesh
npm run serve:mesh

this works well.

however, if I try to run it as serverless, since I am deploying on Vercel:

npm run dev
curl http://localhost:5173/api/graphql

I get this error:

2:18:23 AM [vite] Error when evaluating SSR module /.mesh/index.ts: failed to import "graphql"
|- SyntaxError: [vite] Named export 'GraphQLScalarTypeConfig' not found. The requested module 'graphql' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'graphql';
const {GraphQLResolveInfo, SelectionSetNode, FieldNode, GraphQLScalarTypeConfig} = pkg;

    at analyzeImportedModDifference (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:54078:19)
    at nodeImport (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55114:9)
    at async ssrImport (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55011:24)
    at async eval (/Users/roeeklinger/Github/svelteket-website/.mesh/index.ts:3:44)
    at async instantiateModule (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:9)

2:18:23 AM [vite] Error when evaluating SSR module /Users/roeeklinger/Github/svelteket-website/src/routes/api/graphql/+server.ts: failed to import "/.mesh/index.ts"
|- SyntaxError: [vite] Named export 'GraphQLScalarTypeConfig' not found. The requested module 'graphql' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'graphql';
const {GraphQLResolveInfo, SelectionSetNode, FieldNode, GraphQLScalarTypeConfig} = pkg;

    at analyzeImportedModDifference (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:54078:19)
    at nodeImport (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55114:9)
    at async ssrImport (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55011:24)
    at async eval (/Users/roeeklinger/Github/svelteket-website/.mesh/index.ts:3:44)
    at async instantiateModule (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:9)

SyntaxError: [vite] Named export 'GraphQLScalarTypeConfig' not found. The requested module 'graphql' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'graphql';
const {GraphQLResolveInfo, SelectionSetNode, FieldNode, GraphQLScalarTypeConfig} = pkg;

    at analyzeImportedModDifference (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:54078:19)
    at nodeImport (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55114:9)
    at async ssrImport (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55011:24)
    at async eval (/Users/roeeklinger/Github/svelteket-website/.mesh/index.ts:3:44)
    at async instantiateModule (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:9)

Mesh can be deployed to Vercel using NextJS, and it can be deployed using Sveltekit, can I also deploy Mesh to Vercel as serverless when using Sveltekit?

[enisdenjo]

@roeeklinger can you try with:

@graphql-mesh/cli@0.91.0-alpha-20240620123302-b0b8c297177208f5e5378cf7da64c3220c4a9c0c

from #7131. Thanks!

If it still doesn't work, a repro would be much appreciated!

[roeeklinger]

Thanks @enisdenjo ! I tested the package hash you suggested, but unfortunately it had the same result.

My project had a lot of private stuff, so I gathered some public APIs from the web and stitched together a repro repo for you here.

Simply run:
npm run dev

and try:
curl -X POST http://localhost:5174/api

You will see the error come up.

You can also use the following commands to pull schema:
npm run build:mesh

Hope that helps!