Vercel build error "Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/node-fetch not supported."

[wscourge]

What are the steps to reproduce this issue?

1. Create Next.js 14.1.0 app
2. Install @honeybadger-io/next
3. Deploy to Vercel

What happens?

Build error occurred
Error [ERR_REQUIRE_ESM]: require() of ES Module /vercel/path0/node_modules/node-fetch/src/index.js from /vercel/path0/node_modules/@honeybadger-io/plugin-core/dist/index.js not supported.
Instead change the require of /vercel/path0/node_modules/node-fetch/src/index.js in /vercel/path0/node_modules/@honeybadger-io/plugin-core/dist/index.js to a dynamic import() which is available in all CommonJS modules.

What were you expecting to happen?

Build passes

Any logs, error output, etc?

full backtrace

[16:56:49.734] Running build in Washington, D.C., USA (East) – iad1
[16:56:49.824] Cloning github.com/hixdevs/demo-daisy-ui (Branch: dev, Commit: e90a2de)
[16:56:51.369] Cloning completed: 1.545s
[16:56:51.370] Running "bash ./scripts/vercel/ignore.sh"
[16:56:51.379] Warning: Detected "engines": { "node": ">=18.x < 21.0.0" } in your `package.json` that will automatically upgrade when a new major Node.js Version is released. Learn More: http://vercel.link/node-version
[16:56:51.394] VERCEL_ENV: production
[16:56:51.395] VERCEL_GIT_COMMIT_REF: dev
[16:56:51.544] Found .vercelignore
[16:56:51.567] Removed 65 ignored files defined in .vercelignore
[16:56:59.152] Restored build cache
[16:56:59.286] Running "vercel build"
[16:56:59.957] Vercel CLI 33.1.0
[16:57:01.845] Warning: Detected "engines": { "node": ">=18.x < 21.0.0" } in your `package.json` that will automatically upgrade when a new major Node.js Version is released. Learn More: http://vercel.link/node-version
[16:57:01.856] Running "install" command: `bun install`...
[16:57:02.532] bun install v1.0.22 (b400b36c)
[16:57:16.903] 
[16:57:16.904]  + @types/luxon@3.4.1
[16:57:16.904]  + @types/node@20.11.5
[16:57:16.904]  + @types/react@18.2.48
[16:57:16.904]  + @typescript-eslint/eslint-plugin@6.19.0
[16:57:16.904]  + @typescript-eslint/parser@6.19.0
[16:57:16.904]  + @vitest/coverage-v8@1.2.1
[16:57:16.904]  + autoprefixer@10.4.17
[16:57:16.904]  + cypress@13.6.3
[16:57:16.904]  + daisyui@4.6.0
[16:57:16.904]  + eslint@8.56.0
[16:57:16.904]  + eslint-config-prettier@9.1.0
[16:57:16.904]  + jsdom@23.2.0
[16:57:16.904]  + prettier@3.2.4
[16:57:16.904]  + stylelint@16.1.0
[16:57:16.905]  + stylelint-config-standard-scss@13.0.0
[16:57:16.905]  + supabase@1.133.3
[16:57:16.905]  + vitest@1.2.1
[16:57:16.905]  + @getbrevo/brevo@1.0.1
[16:57:16.905]  + @honeybadger-io/nextjs@5.8.12
[16:57:16.905]  + @honeybadger-io/react@6.1.19
[16:57:16.905]  + @stripe/stripe-js@2.3.0
[16:57:16.905]  + @tanstack/react-query@5.17.15
[16:57:16.905]  + @tanstack/react-query-devtools@5.17.18
[16:57:16.905]  + @tanstack/react-query-next-experimental@5.17.15
[16:57:16.905]  + @tawk.to/tawk-messenger-react@2.0.2
[16:57:16.905]  + classnames@2.5.1
[16:57:16.905]  + next@14.1.0
[16:57:16.905]  + next-intl@3.4.5
[16:57:16.905]  + react-hook-form@7.49.3
[16:57:16.905]  + react-icons@5.0.1
[16:57:16.905]  + stripe@14.12.0
[16:57:16.905]  + zod@3.22.4
[16:57:16.905] 
[16:57:16.905]  175 packages installed [14.39s]
[16:57:16.906] warn: cypress's postinstall script took 9.7s
[16:57:16.906] 
[16:57:17.452] Detected Next.js version: 14.1.0
[16:57:17.453] Running "bash ./scripts/vercel/build.sh"
[16:57:17.462] ✅ - Build started
[16:57:18.062]  ⨯ Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
[16:57:18.069] 
[16:57:18.069] > Build error occurred
[16:57:18.071] Error [ERR_REQUIRE_ESM]: require() of ES Module /vercel/path0/node_modules/node-fetch/src/index.js from /vercel/path0/node_modules/@honeybadger-io/plugin-core/dist/index.js not supported.
[16:57:18.071] Instead change the require of /vercel/path0/node_modules/node-fetch/src/index.js in /vercel/path0/node_modules/@honeybadger-io/plugin-core/dist/index.js to a dynamic import() which is available in all CommonJS modules.
[16:57:18.071]     at mod.require (/vercel/path0/node_modules/next/dist/server/require-hook.js:65:28)
[16:57:18.071]     at Object.<anonymous> (/vercel/path0/node_modules/@honeybadger-io/plugin-core/dist/index.js:3:21)
[16:57:18.071]     at mod.require (/vercel/path0/node_modules/next/dist/server/require-hook.js:65:28)
[16:57:18.071]     at Object.<anonymous> (/vercel/path0/node_modules/@honeybadger-io/webpack/dist/HoneybadgerSourceMapPlugin.js:11:19)
[16:57:18.071]     at mod.require (/vercel/path0/node_modules/next/dist/server/require-hook.js:65:28)
[16:57:18.071]     at Object.<anonymous> (/vercel/path0/node_modules/@honeybadger-io/nextjs/dist/honeybadger-nextjs.cjs.js:7:34)
[16:57:18.071]     at mod.require (/vercel/path0/node_modules/next/dist/server/require-hook.js:65:28)
[16:57:18.071]     at Object.<anonymous> (/vercel/path0/next.config.js:4:30) {
[16:57:18.071]   code: 'ERR_REQUIRE_ESM'
[16:57:18.071] }
[16:57:18.082] Error: Command "bash ./scripts/vercel/build.sh" exited with 1
[16:57:18.730] 

Any other comments?

full package.json

{
  "name": "daisy_ui",
  "private": "true",
  "version": "1.0.0",
  "type": "module",
  "packageManager": "bun@1.0.22",
  "engines": {
    "node": ">=18.x < 21.0.0"
  },
  "scripts": {
    "db:import": "bun run scripts ./scripts/imports/index.ts",
    "db:types": "supabase gen types typescript --local --schema public > types/db.ts",
    "dev": "supabase start & bun run stripe:listen & next dev --port 2500",
    "lint:css": "stylelint './**/*.scss'",
    "lint:css:fix": "bun run lint:css --fix",
    "lint:editorconfig": "editorconfig-cli --exclude types/db.ts --exclude public/**/* --verbose",
    "lint:js": "prettier --config ./.prettierrc.js --check . && eslint . --config ./.eslintrc.js --ext ts --ext tsx --ext js --ext jsx",
    "lint:js:fix": "prettier --config ./.prettierrc.js --write . && bun run lint:js --fix",
    "typecheck": "tsc --project tsconfig.json",
    "lint:sql": "sqlfluff lint ./supabase/migrations --config ./.sqlfluff",
    "lint:sql:fix": "sqlfluff fix ./supabase/migrations --config ./.sqlfluff --verbose --force",
    "scripts": "NODE_NO_WARNINGS=1 DOTENV_CONFIG_PATH=.env.development ts-node",
    "scripts:dev": "DOTENV_CONFIG_PATH=.env.dev.local ts-node",
    "scripts:prd": "DOTENV_CONFIG_PATH=.env.prd.local ts-node",
    "stripe:listen": "stripe listen --forward-to=localhost:2500/api/billing/webhook",
    "test:e2e:open": "DOTENV_CONFIG_PATH=.env.test TEST_E2E=1 start-server-and-test dev http://localhost:2500 \"cypress open --e2e\"",
    "test:e2e:run": "DOTENV_CONFIG_PATH=.env.test TEST_E2E=1 start-server-and-test dev http://localhost:2500 \"cypress run --e2e\"",
    "test:e2e:one": "DOTENV_CONFIG_PATH=.env.test TEST_E2E=1 start-server-and-test dev http://localhost:2500 \"cypress run --e2e --spec cypress/e2e/site/404.cy.ts\"",
    "test:unit:watch": "DOTENV_CONFIG_PATH=.env.test vitest",
    "test:unit:run": "DOTENV_CONFIG_PATH=.env.test vitest run",
    "build:dev": "NODE_NO_WARNINGS=1 DOTENV_CONFIG_PATH=.env.development next build",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@honeybadger-io/react": "~6.1.18",
    "@honeybadger-io/nextjs": "~5.8.11",
    "@hookform/resolvers": "~3.3.4",
    "@mdx-js/mdx": "~3.0.0",
    "@mdx-js/react": "~3.0.0",
    "@napi-rs/image": "^1.7.0",
    "@stripe/stripe-js": "~2.3.0",
    "@supabase/auth-helpers-nextjs": "~0.8.7",
    "@supabase/auth-helpers-react": "~0.4.2",
    "@supabase/auth-ui-react": "~0.4.7",
    "@supabase/auth-ui-shared": "~0.1.8",
    "@supabase/supabase-js": "~2.39.3",
    "@tanstack/react-query": "~5.17.12",
    "@tanstack/react-query-devtools": "~5.17.12",
    "@tanstack/react-query-next-experimental": "~5.17.12",
    "aos": "~2.3.4",
    "base64-arraybuffer": "~1.0.2",
    "classnames": "~2.5.1",
    "@tawk.to/tawk-messenger-react": "~2.0.2",
    "csstype": "^3.1.2",
    "luxon": "~3.4.4",
    "dotenv": "~16.3.1",
    "jstoxml": "~3.2.10",
    "lodash": "~4.17.21",
    "next-intl": "~3.4.2",
    "next-seo": "~6.4.0",
    "node-mailjet": "~6.0.5",
    "react-hook-form": "~7.49.3",
    "react-hot-toast": "~2.4.1",
    "reading-time-estimator": "~1.9.4",
    "remark": "~15.0.1",
    "remark-breaks": "~4.0.0",
    "remark-emoji": "~4.0.1",
    "remark-frontmatter": "~5.0.0",
    "remark-gfm": "~4.0.0",
    "remark-heading-id": "~1.0.1",
    "remark-mdx-frontmatter": "~4.0.0",
    "remark-parse": "~11.0.0",
    "remark-parse-frontmatter": "~1.0.3",
    "remark-squeeze-paragraphs": "~6.0.0",
    "remark-stringify": "~11.0.0",
    "remark-toc": "~9.0.0",
    "remark-unwrap-images": "~4.0.0",
    "@getbrevo/brevo": "1.0.1",
    "stripe": "~14.12.0",
    "zod": "~3.22.4",
    "react-icons": "~5.0.1",
    "yaml": "~2.3.4",
    "yaml-loader": "~0.8.0",
    "satori": "^0.10.9",
    "sharp": "^0.32.6",
    "next": "14.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@htmlacademy/editorconfig-cli": "~2.0.8",
    "@next/eslint-plugin-next": "~14.0.4",
    "jsdom": "~23.2.0",
    "vitest": "~1.2.0",
    "@testing-library/react": "~14.1.2",
    "@testing-library/user-event": "~14.5.2",
    "@vitejs/plugin-react": "~4.2.1",
    "@vitest/coverage-v8": "~1.2.0",
    "vite-tsconfig-paths": "~4.2.3",
    "@modyfi/vite-plugin-yaml": "~1.0.4",
    "autoprefixer": "~10.4.16",
    "postcss": "~8.4.33",
    "tailwindcss": "~3.4.1",
    "@tailwindcss/typography": "~0.5.10",
    "cypress": "~13.6.2",
    "daisyui": "~4.6.0",
    "eslint": "~8.56.0",
    "eslint-config-next": "~14.0.4",
    "eslint-config-prettier": "~9.1.0",
    "eslint-plugin-cypress": "~2.15.1",
    "eslint-plugin-import": "~2.29.1",
    "eslint-plugin-unused-imports": "~3.0.0",
    "eslint-plugin-react": "~7.33.2",
    "eslint-plugin-simple-import-sort": "~10.0.0",
    "eslint-plugin-testing-library": "~6.2.0",
    "eslint-plugin-vitest": "~0.3.20",
    "gray-matter": "~4.0.3",
    "prettier": "~3.2.2",
    "start-server-and-test": "~2.0.3",
    "stylelint": "~16.1.0",
    "stylelint-config-prettier-scss": "~1.0.0",
    "stylelint-config-standard-scss": "~13.0.0",
    "supabase": "~1.133.3",
    "@types/lodash": "~4.14.202",
    "@types/luxon": "~3.4.1",
    "@types/mdx": "~2.0.10",
    "@types/aos": "~3.0.7",
    "@types/jstoxml": "~2.0.4",
    "@typescript-eslint/eslint-plugin": "~6.19.0",
    "@typescript-eslint/parser": "~6.19.0",
    "ts-node": "~10.9.2",
    "tsconfig-paths": "~4.2.0",
    "typescript": "~5.3.3",
    "@types/node": "~20.11.2",
    "@types/react": "~18.2.48"
  },
  "optionalDependencies": {
    "@rollup/rollup-linux-x64-musl": "4.7.0",
    "@rollup/rollup-linux-x64-gnu": "4.7.0"
  }
}

What versions are you using?

Operating System: whatever's on vercel
Package Name: next
Package Version:

"@honeybadger-io/react": "~6.1.18",
"@honeybadger-io/nextjs": "~5.8.11"

Browser Version: n/a

[subzero10]

Hey @wscourge, thanks for reporting this!

I just tried with a minimal example app and I'm also getting an error (though different from what you reported). I will take a deeper look and write here when I have updates.

[wscourge]

OK sure thanks for getting back to me @subzero10. I can give you access to a fork of the private repo that fails so you can clone it and reproduce my exact error, if it helps. Let me know.

[subzero10]

Hey @wscourge, that'd be great. Can you please do that?

[wscourge]

OK I'm doing it, gimme 10min

[wscourge]

I sent you an invite. Please do the following:

0. Confirm it runs via bun install and bun dev
1. Create your own fork and deploy it to Vercel by yourself, I don't want to figure-out the access there.
2. See .env.development file and setup those variables on your Vercel project

LMK if I can help you any further, cheers

[subzero10]

Hey @wscourge,

I couldn't fork the repository (forking is disabled), but here's what I did:

1. I cloned the repository.
2. I ran bun install and bun dev and verified that I can run the project locally.
3. I created a new private GitHub repository and connected to Vercel for automatic deployments.
4. I confirmed that the project is deployed and runs on Vercel. I didn't have to do anything and Vercel automically picked up configuration from vercel.json. Here's a link to it: https://honeybadger-issue-1290.vercel.app

I didn't change anything other than the config that points to the new vercel domain.

I also added a button to report to Honeybadger (it reports to my HB project).

[subzero10]

Hey @wscourge,

Any updates on this? I'd love to help out but I will need a reproducible example.