POSTS / Fix `Unknown file extension` Error in Vercel Deployment

Today I found that the latest deployment failed with error log:

[23:27:00.844] Running "yarn run build"
[23:27:01.034] yarn run v1.22.17
[23:27:01.067] $ ts-node .scripts/pre/index.ts && vite build && ts-node .scripts/post/index.ts && cp -r static/* build
[23:27:02.022] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /vercel/path0/.scripts/pre/index.ts
[23:27:02.022]     at new NodeError (node:internal/errors:405:5)
[23:27:02.022]     at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:136:11)
[23:27:02.022]     at defaultGetFormat (node:internal/modules/esm/get_format:182:36)
[23:27:02.022]     at defaultLoad (node:internal/modules/esm/load:101:20)
[23:27:02.022]     at nextLoad (node:internal/modules/esm/hooks:864:28)
[23:27:02.022]     at load (/vercel/path0/node_modules/ts-node/dist/child/child-loader.js:19:122)
[23:27:02.022]     at nextLoad (node:internal/modules/esm/hooks:864:28)
[23:27:02.023]     at Hooks.load (node:internal/modules/esm/hooks:447:26)
[23:27:02.023]     at MessagePort.handleMessage (node:internal/modules/esm/worker:196:24)
[23:27:02.023]     at [nodejs.internal.kHybridDispatch] (node:internal/event_target:786:20) {
[23:27:02.023]   code: 'ERR_UNKNOWN_FILE_EXTENSION'
[23:27:02.023] }
[23:27:02.048] error Command failed with exit code 1.
[23:27:02.049] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[23:27:02.067] Error: Command "yarn run build" exited with 1

I’ve met that error during local build, then finding one reply to TypeStrong/ts-node#1997 saying that node --loader ts-node/esm {file} should work and it really did. However, at that time vercel deployment never failed with that error.

So this time I tried to replace all ts-node {file} to node --loader ts-node/esm {file}, but another error appeared:

[16:14:05.509] yarn install v1.22.17
[16:14:05.584] [1/4] Resolving packages...
[16:14:05.895] error An unexpected error occurred: "https://registry.yarnpkg.com/node%20--loader%20ts-node%2fesm: Request "https://registry.yarnpkg.com/node%20--loader%20ts-node%2fesm" returned a 405".
[16:14:05.896] info If you think this is a bug, please open a bug report with the information provided in "/vercel/path0/yarn-error.log".
[16:14:05.896] info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
[16:14:05.911] Error: Command "yarn install" exited with 1

Then I looked through TypeStrong/ts-node#1997 again, trying to find some other information helpful to solving the issue. The conclusion is that I should use a lower version of Node.js. My local environment is using node v20.6.1 and that’s why the previous build failed.

I switched my local Node.js to v18.17.1 and everything went well, so I set the node property inside engines of my package.json file like this:

{
  "engines": {
    "node": "18.17.1"
  },
}

And I got another error:

[17:11:33.956] Running build in Washington, D.C., USA (East) – iad1
[17:11:35.771] Cloning github.com/String10/Hakuba (Branch: bugfix, Commit: c00e348)
[17:11:36.778] Cloning completed: 1.004s
[17:11:40.927] Restored build cache
[17:11:41.065] Running "vercel build"
[17:11:43.453] Vercel CLI 33.5.5
[17:11:44.152] Warning: Detected "engines": { "node": "18.17.1" } in your `package.json` with major.minor.patch, but only major Node.js Version can be selected. Learn More: http://vercel.link/node-version
[17:11:44.155] Installing dependencies...
[17:11:44.475] yarn install v1.22.17
[17:11:44.551] [1/5] Validating package.json...
[17:11:44.557] error [email protected]: The engine "node" is incompatible with this module. Expected version "18.17.1". Got "18.19.1"
[17:11:44.570] error Found incompatible module.
[17:11:44.571] info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
[17:11:44.585] Error: Command "yarn install" exited with 1

That really confused me. If I’m already using Node 18.x, why isn’t it working? Soon after, I found another issue TypeStrong/ts-node#2094, saying that npx ts-node {file} doesn’t work on Node.js 18.19.0 just as it does with 18.18.2 and Vercel is just using Node.js 18.19.1!

As Vercel: Node.js Version says, it will always use the latest v18 version if 18.x is set, so I have to set Node.js Version to 16.x to let the build flow work. Hope that the issues can be fixed before June 15. 😇

Update: As one reply in TypeStrong/ts-node#1997 instructs, I use tsx instead of ts-node to execute the scripts. It works well with Node.js 20.x on Vercel!