It does not seem to be working with NextJs API route handlers and Neo4J driver

[DanielAtCosmicDNA]

When you run the canonical code from: https://github.com/CosmicDNA/neo4j-graphql-example-nextjs/tree/5385e091ce68004de94bda184c940e69a09c7dee,

with yarn run dev and go to /api/graphql path, the following error is thrown:

 ⨯ Error: Cannot use GraphQLNonNull "String!" from another module or realm.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

https://yarnpkg.com/en/docs/selective-version-resolutions

Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.

[DanielAtCosmicDNA]

For your reference, this code is based on https://github.com/CosmicDNA/neo4j-graphql-example and which is a GraphQL server without Nextjs where everything works as intended.

[martinnabhan]

Have you tried adding graphql to your package.json? As is done here: https://github.com/CosmicDNA/neo4j-graphql-example/blob/d42de8bb7abe6beb32bc61116b779cc66167e4a4/package.json#L16

[DanielAtCosmicDNA]

Have you tried adding graphql to your package.json? As is done here: https://github.com/CosmicDNA/neo4j-graphql-example/blob/d42de8bb7abe6beb32bc61116b779cc66167e4a4/package.json#L16

I just tested adding graphql@^16.9.0 but the same problem still persists...

[martinnabhan]

I see, then maybe using resolutions to pin the version of graphql might work?

[DanielAtCosmicDNA]

I see, then maybe using resolutions to pin the version of graphql might work?

I just tried with

"resolutions": {
    "graphql": "16.9.0"
}

And the same problem still occurred.

The same problem is also happening with the code from here. It is based on https://portal.gitnation.org/contents/full-stack-graphql-in-the-cloud-with-neo4j-aura-nextjs-and-vercel and does not use @as-integrations/next.

[DanielAtCosmicDNA]

This problem may be associated with: apollographql/apollo-server#4637

[DanielAtCosmicDNA]

I found out that if instead of using NextJs 13+ API route handlers, if I use pages, it works as expected. The working code is this one. This indicates that the bug might reside within @as-integrations/next because it currently only working for the case where the handler is used with regular NextJs pages/api.

[Abhid14]

Hi @DanielAtCosmicDNA removing --turbo flag helped me get rid of this error which you too are facing.
Hope this helps you!

// next.config.mjs here is what you need to edit

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["graphql"],
  },
};

export default nextConfig;


// package.json
{
  "name": "neo4j-nextjs-sample",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@apollo/server": "^4.10.4",
    "@auth0/nextjs-auth0": "^3.5.0",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@hookform/resolvers": "^3.9.0",
    "@mui/icons-material": "^6.1.3",
    "@neo4j/graphql": "^5.4.4",
    "@neo4j/graphql-ogm": "^5.4.4",
    "@radix-ui/react-accordion": "^1.2.1",
    "@radix-ui/react-alert-dialog": "^1.1.2",
    "@radix-ui/react-aspect-ratio": "^1.1.0",
    "@radix-ui/react-avatar": "^1.1.1",
    "@radix-ui/react-checkbox": "^1.1.2",
    "@radix-ui/react-collapsible": "^1.1.1",
    "@radix-ui/react-context-menu": "^2.2.2",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-hover-card": "^1.1.2",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-menubar": "^1.1.2",
    "@radix-ui/react-navigation-menu": "^1.2.1",
    "@radix-ui/react-popover": "^1.1.2",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.2.1",
    "@radix-ui/react-scroll-area": "^1.2.0",
    "@radix-ui/react-select": "^2.1.2",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slider": "^1.2.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.1",
    "@radix-ui/react-tabs": "^1.1.1",
    "@radix-ui/react-toast": "^1.2.2",
    "@radix-ui/react-toggle": "^1.1.0",
    "@radix-ui/react-toggle-group": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.3",
    "@react-three/drei": "^9.114.0",
    "@react-three/fiber": "^8",
    "@tanstack/react-query": "^5.59.15",
    "@trpc/client": "^11.0.0-rc.580",
    "@trpc/react-query": "^11.0.0-rc.580",
    "@trpc/server": "^11.0.0-rc.580",
    "@types/mongodb": "^4.0.7",
    "@types/three": "^0.168.0",
    "apollo-server": "^3.13.0",
    "class-variance-authority": "^0.7.0",
    "client-only": "^0.0.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.0",
    "date-fns": "^4.1.0",
    "embla-carousel-react": "^8.3.0",
    "framer-motion": "^11.7.0",
    "graphql-yoga": "^5.6.0",
    "input-otp": "^1.2.4",
    "jotai": "^2",
    "lucide-react": "^0.452.0",
    "mongodb": "^6.9.0",
    "neo4j-driver": "^5.22.0",
    "next": "^14",
    "next-themes": "^0.3.0",
    "posthog-js": "^1.165.1",
    "posthog-node": "^4.2.0",
    "react": "^18.3.1",
    "react-day-picker": "8.10.1",
    "react-dom": "^18",
    "react-hook-form": "^7.53.0",
    "react-resizable-panels": "^2.1.4",
    "react-test-renderer": "19.0.0-rc-cd22717c-20241013",
    "recharts": "^2.13.0",
    "server-only": "^0.0.1",
    "sonner": "^1.5.0",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "^1.0.7",
    "three": "^0.168.0",
    "three-globe": "^2.31.3",
    "vaul": "^1.1.0",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3",
    "eslint": "^8",
    "eslint-config-next": "14"
  }
}