SvelteKit project throw an error during Vercel build

Hello folks

I'm building two different projects in Svelte with SvelteKit and I'm facing the same error in both project deployments in Vercel.

error during build:
Error [ERR_REQUIRE_ESM]: require() of ES Module /vercel/path0/node_modules/string-width/index.js from /vercel/path0/node_modules/wide-align/align.js not supported.
Instead change the require of index.js in /vercel/path0/node_modules/wide-align/align.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/vercel/path0/node_modules/wide-align/align.js:2:19)
error: script "build" exited with code 1
Error: Command "bun run build" exited with 1

It's interesting to note that this error is only thrown when the build is triggered by a push to my GitHub repository. If I retry the deployment manually, it passes each time.

Thx in advance for your help!

Vercel Staff

Hey ! I wasn't able to replicate this issue with a SvelteKit starter project. Do you have a public repo or minimal reproducible example that we can use to debug this together?

Hey ! Thx for your reply Unfortunately, both repositories are private...

I can give you my dependencies if it helps

"devDependencies": {
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^4.0.0",
    "@types/eslint": "^9.6.0",
    "autoprefixer": "^10.4.20",
    "clsx": "^2.1.1",
    "eslint": "^9.7.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-svelte": "^2.36.0",
    "globals": "^15.0.0",
    "prettier": "^3.3.2",
    "prettier-plugin-svelte": "^3.2.6",
    "prettier-plugin-tailwindcss": "^0.6.5",
    "svelte": "^5.0.0",
    "svelte-check": "^4.0.0",
    "tailwindcss": "^3.4.9",
    "typescript": "^5.0.0",
    "typescript-eslint": "^8.0.0",
    "vite": "^5.0.3"
  },
  "dependencies": {
    "gsap": "^3.12.5"
  }```

Both projects are just at their beginning, they're nothing more than an index page and the added packages in it.

Vercel Staff

I know SvelteKit is designed to work with ESM, so it's important to make sure everything in the project uses that same syntax. It looks like something in the project uses wide-align and the require() on this line is throwing the error.

https://github.com/iarna/wide-align/blob/c1bf09df8a2c549d68a7a0e65315db89d0eff457/align.js#L2

GitHub

wide-align/align.js at c1bf09df8a2c549d68a7a0e65315db89d0eff457 · iarna/wide-align

Contribute to iarna/wide-align development by creating an account on GitHub.

I asked v0 for more ideas. You can find the full chat here: https://v0.dev/chat/SxFxCJlDS7g

Please give those suggestions a try and let me know how it goes

Thx again for your help!

Do you have any idea why the build succeeds when it's retried manually?

Vercel Staff

I don't know for sure, but it sounds like a Build cache issue.

vercel.com

Troubleshooting Build Errors

Learn how to resolve common scenarios you may encounter during the Build step, including build errors that cancel a deployment and long build times.

https://vercel.com/docs/deployments/troubleshoot-a-build

This topic is closed. It no longer accepts new replies.

error during build: Error [ERR_REQUIRE_ESM]: require() of ES Module /vercel/path0/node_modules/string-width/index.js from /vercel/path0/node_modules/wide-align/align.js not supported. Instead change the require of index.js in /vercel/path0/node_modules/wide-align/align.js to a dynamic import() which is available in all CommonJS modules. at Object.<anonymous> (/vercel/path0/node_modules/wide-align/align.js:2:19) error: script "build" exited with code 1 Error: Command "bun run build" exited with 1

"devDependencies": { "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^4.0.0", "@types/eslint": "^9.6.0", "autoprefixer": "^10.4.20", "clsx": "^2.1.1", "eslint": "^9.7.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-svelte": "^2.36.0", "globals": "^15.0.0", "prettier": "^3.3.2", "prettier-plugin-svelte": "^3.2.6", "prettier-plugin-tailwindcss": "^0.6.5", "svelte": "^5.0.0", "svelte-check": "^4.0.0", "tailwindcss": "^3.4.9", "typescript": "^5.0.0", "typescript-eslint": "^8.0.0", "vite": "^5.0.3" }, "dependencies": { "gsap": "^3.12.5" }``` Both projects are just at their beginning, they're nothing more than an index page and the added packages in it.