During vercel build – getting ERR_REQUIRE_ESM error from sentry dependency

[kevinreber]

Just integrated sentry into my Remix app that's deployed on Vercel and I'm getting a ERR_REQUIRE_ESM error during build

Error [ERR_REQUIRE_ESM]: require() of ES Module /vercel/path0/node_modules/string-width/index.js from /vercel/path0/node_modules/cliui/build/index.cjs not supported.
--
23:20:02.244 | Instead change the require of index.js in /vercel/path0/node_modules/cliui/build/index.cjs to a dynamic import() which is available in all CommonJS modules.
23:20:02.244 | at Object.<anonymous> (/vercel/path0/node_modules/cliui/build/index.cjs:291:21)
23:20:02.244 | at Object.<anonymous> (/vercel/path0/node_modules/yargs/build/index.cjs:1:60678)
23:20:02.244 | at Object.<anonymous> (/vercel/path0/node_modules/yargs/index.cjs:5:30)
23:20:02.244 | at Object.<anonymous> (/vercel/path0/node_modules/@sentry/remix/scripts/sentry-upload-sourcemaps.js:2:15) {
23:20:02.244 | code: 'ERR_REQUIRE_ESM'
23:20:02.244 | }
23:20:02.244 |  
23:20:02.244 | Node.js v20.9.0
23:20:02.258 | error Command failed with exit code 1.
23:20:02.258 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
23:20:02.278 | Error: Command "yarn run build" exited with 1

Followed these instructions and everything is working fine locally, so I don't think I missed a step:

• Setup Remix and Sentry: https://docs.sentry.io/platforms/javascript/guides/remix/
• Setup Sentry on Vercel: https://docs.sentry.io/product/integrations/deployment/vercel/

this is my setup below
remix.config.ts

/** @type {import('@remix-run/dev').AppConfig} */

export default {
  serverModuleFormat: "esm",
  ignoredRouteFiles: ["**/.*"],
  serverPlatform: "node",
  serverDependenciesToBundle: [
    "@ant-design/icons",
    /^@ant-design\/icons-svg.*/,
    /^rc-util.*/,
  ],
  browserNodeBuiltinsPolyfill: { modules: { crypto: true } }
};

package.json

{
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix build --sourcemap && sentry-upload-sourcemaps --org kevin-reber --project javascript-remix",
    "dev": "remix dev --manual",
    "start": "remix-serve ./build/index.js",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/css-bundle": "^2.2.0",
    "@remix-run/express": "^2.2.0",
    "@remix-run/node": "2.2.0",
    "@remix-run/react": "2.2.0",
    "@sentry/remix": "^7.93.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remix-auth": "^3.6.0",
    "remix-auth-socials": "^2.0.5",
    "remix-utils": "^7.1.0",
    ...
  },
  "devDependencies": {
    "@remix-run/dev": "2.2.0",
    "@remix-run/eslint-config": "2.2.0",
    "@remix-run/serve": "2.2.0",
    "@types/eslint": "^8.44.3",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "typescript": "^5.3.0",
    ...
  },
  "engines": {
    "node": ">20.0.0"
  }
}