processRequest type error in build

[javiash]

Hi! Thanks, @jaydenseric for this package. I had some issues trying to make it work with apollo server 4, but now everything is working perfectly... With the only exception when I try to build my nextjs project. This is what I'm getting:

info  - Linting and checking validity of types .Failed to compile.

./node_modules/.pnpm/graphql-upload@16.0.2_graphql@16.6.0/node_modules/graphql-upload/processRequest.mjs:80:30
Type error: Type 'IterableIterator<Upload>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

  78 |
  79 |       if (map)
> 80 |         for (const upload of map.values())
     |                              ^
  81 |           if (!upload.file) upload.reject(exitError);
  82 |
  83 |       // If the error came from the parser, don’t cause it to be emitted again.
info  - Linting and checking validity of types .. ELIFECYCLE  Command failed with exit code 1.

In dev environment is working as expected, it's only when I try to build the project.

My package.json:

{
  "name": "puntorol",
  "version": "0.1.10",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "prettier": "prettier --write ."
  },
  "dependencies": {
    "@apollo/client": "^3.7.3",
    "@apollo/server": "^4.3.0",
    "@as-integrations/next": "^1.2.0",
    "@dicebear/adventurer": "^4.10.7",
    "@dicebear/avatars": "^4.10.7",
    "@mantine/core": "^5.9.5",
    "@mantine/dates": "^5.9.5",
    "@mantine/dropzone": "^5.9.5",
    "@mantine/form": "^5.9.5",
    "@mantine/hooks": "^5.9.5",
    "@mantine/modals": "^5.9.5",
    "@mantine/next": "^5.9.5",
    "@mantine/notifications": "^5.9.5",
    "@mantine/nprogress": "^5.9.5",
    "@mantine/rte": "^5.9.5",
    "@mantine/spotlight": "^5.9.5",
    "@mantine/tiptap": "^5.9.5",
    "@tiptap/extension-color": "2.0.0-beta.209",
    "@tiptap/extension-highlight": "2.0.0-beta.209",
    "@tiptap/extension-link": "2.0.0-beta.209",
    "@tiptap/extension-text-align": "2.0.0-beta.209",
    "@tiptap/extension-text-style": "2.0.0-beta.209",
    "@tiptap/extension-underline": "2.0.0-beta.209",
    "@tiptap/react": "2.0.0-beta.209",
    "@tiptap/starter-kit": "2.0.0-beta.209",
    "apollo-upload-client": "^17.0.0",
    "aws-sdk": "^2.1282.0",
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "dayjs": "^1.11.7",
    "google-map-react": "^2.2.0",
    "graphql": "^16.6.0",
    "graphql-upload": "^16.0.2",
    "highlight.js": "^11.7.0",
    "ipapi.co": "^0.3.0",
    "mongoose": "^6.8.1",
    "next": "12.3.4",
    "next-auth": "4.18.7",
    "react": "18.2.0",
    "react-cropper": "^2.1.8",
    "react-dom": "18.2.0",
    "react-icons": "^4.7.1",
    "sass": "^1.57.1",
    "tabler-icons-react": "^1.56.0",
    "tinify": "^1.7.1"
  },
  "devDependencies": {
    "@types/apollo-upload-client": "^17.0.2",
    "@types/bcryptjs": "^2.4.2",
    "@types/google-map-react": "^2.1.7",
    "@types/node": "18.11.17",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "eslint": "8.30.0",
    "eslint-config-next": "12.3.4",
    "eslint-config-prettier": "^8.5.0",
    "typescript": "4.9.4"
  }
}

Let me know if you need more information. Thanks!

[javiash]

Well, I couldn't solve it, but I could find "something"...

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "maxNodeModuleJsDepth": 10,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/gql/*": ["gql/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

If I remove "maxNodeModuleJsDepth" I can't import processRequest as it says that it's missing its type declarations, and if I leave it it's giving me this type error in the processRequest file.

I'm using pnpm to install my packages.

[jaydenseric]

Did you try what the TypeScript error message suggested; setting the target to something higher than what you have (which probably has problems with for ... of iteration), perhaps "es2015"?

Closing because this issue isn't to do with graphql-upload, but rather how your specific project is configured.

Next.js shouldn't be transpiling server dependencies like graphql-upload to old ES syntax; Node.js can handle running graphql-upload without any transpilation at all.