Search code examples
typescriptvercelremix.run

Remix deployment fails in Vercel but works fine in development - 'AbortController' not found

I'm still fairly green when it comes to React and need some help figuring this out. Can anyone figure out why this fails when deploying to Vercel?

I haven't used AbortController explicitly anywhere so assume that maybe its related to one of the packages installed?

Repo: Github Repo

The project runs fine in development

//tsconfig.json
{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  }
}


//package.json
{
  "name": "country-app",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -o ./app/tailwind.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -i ./app/global.css -o ./app/tailwind.css --watch",
    "start": "remix-serve ./build/index.js",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@remix-run/css-bundle": "^2.0.0",
    "@remix-run/node": "^2.0.0",
    "@remix-run/react": "^2.0.0",
    "@remix-run/serve": "^2.0.0",
    "clsx": "^2.0.0",
    "concurrently": "^8.2.1",
    "isbot": "^3.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remix-utils": "^6.6.0",
    "tailwindcss": "^3.3.3"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.0.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "prettier": "^3.0.3",
    "typescript": "^5.1.6"
  },
  "engines": {
    "node": "18"
  }
}

file:///var/task/build/server-build-nodejs-eyJydW50aW1lIjoibm9kZWpzIn0.mjs:2
  AbortController as NodeAbortController,
  ^^^^^^^^^^^^^^^
SyntaxError: Named export 'AbortController' not found. The requested module '@remix-run/node' 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 '@remix-run/node';

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
RequestId: 12ff4058-63d5-40e3-8dde-8394bd9eb5a2 Error: Runtime exited with error: exit status 1
Runtime.ExitError

I've tried downgrading both remix and nodejs in case that something shipped in those packages was broken but that doesn't seem to be the case.

Any help is appreciated. Thanks :)

Solution

  • Turned out to be an issue with Vercel - The @remix-run/dev package used by their adapter was still on 1.19.3. They've now updated it to 2.0.0 and the deployment is working as expected.