[🐛 Bug]: npx @cloudflare/next-on-pages fails on windows

[thomas-desmond]

next-on-pages environment related information

PS C:\Users\tdesmond\Projects\cloudflare\temp\my-next-app> npx @cloudflare/next-on-pages --info
EXIT WHEN NOT EXPECTED

SHELLAC COMMAND FAILED!
Executing: npm --version in C:\Users\tdesmond\Projects\cloudflare\temp\my-next-app

STDOUT:

STDERR:

/bin/bash: line 1: cd: C:\Users\tdesmond\Projects\cloudflare\temp\my-next-app: No such file or directory

node:internal/process/promises:389
new UnhandledPromiseRejection(reason);
^

UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#".
at throwUnhandledRejectionsMode (node:internal/process/promises:389:7)
at processPromiseRejections (node:internal/process/promises:470:17)
at process.processTicksAndRejections (node:internal/process/task_queues:96:32) {
code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v20.16.0

Description

npx @cloudflare/next-on-pages fails on my Windows machine. At this point it feels like something is configured wrong on my machine but I have not come across documentation pointing me to what I should set up.

I have tried using the Windows Subsystem for Linux like the error for npm run page:build prompts me to do but there is no change in error when running in a Ubuntu terminal on Windows.

Reproduction

I created a brand new Next.js application with npm create cloudflare@latest my-next-app -- --framework=next.

I attempt to run npm run pages:build I get the following error.

/mnt/c/Users/tdesmond/Projects/cloudflare/temp/my-next-app$ npm run pages:build

> my-next-app@0.1.0 pages:build
> npx @cloudflare/next-on-pages

⚡️ @cloudflare/next-on-pages CLI v.1.13.2

⚡️ Warning: It seems like you're on a Windows system, the Vercel CLI (run by @cloudflare/next-on-pages
⚡️ to build your application) seems not to work reliably on Windows so if you experience issues during
⚡️ the build process please try switching to a different operating system or running
⚡️ @cloudflare/next-on-pages under the Windows Subsystem for Linux

EXIT WHEN NOT EXPECTED

SHELLAC COMMAND FAILED!
Executing: npm --version in C:\Users\tdesmond\Projects\cloudflare\temp\my-next-app

STDOUT:



STDERR:

/bin/bash: line 1: cd: C:\Users\tdesmond\Projects\cloudflare\temp\my-next-app: No such file or directory


⚡️ Unexpected error: {"retCode":1,"cmd":"npm --version","stdout":"","stderr":"/bin/bash: line 1: cd: C:\\Users\\tdesmond\\Projects\\cloudflare\\temp\\my-next-app: No such file or directory
⚡️ "}

Pages Deployment Method

None

Pages Deployment ID

No response

Additional Information

No response

Would you like to help?

• Would you like to help fixing this bug?

[irvinebroque]

do you see this when just building the same app without next-on-pages?

[thomas-desmond]

npm run build passes. I deployed the app to Pages as well and it builds on Pages.

So definitely looking like a local setup issue. But I do not know what is missing locally.

[thomas-desmond]

I got one step further but still failing. The original error is saying the directory doesn't exist. But because I'm in WSL the directory locations changes and has /mnt/ in front and is formatted differently. So I created a symbolic link from where the CLI was expecting my app to be (C:\Users\tdesmond\Projects\cloudflare\temp\my-next-app) to where it actually lives in WSL (/mnt/c/Users/tdesmond/Projects/cloudflare/temp/my-next-app)

I get further but still run into an error.

[danbrownuk]

I was able to get this to run by fudging a few lines in index.js to play nicely with WSL. I'm sure there's a better way but this seems to work for now...

Update Command to format cwd to WSL format (/mnt/ at start, flipping slashes and lowercasing drive letter, removing ':', replacing usage of {cwd} with {this.cwd} )
var Command = class { shell; cmd; cwd; interactive; exec; runningState; pipe_logs; exit_expected; retCode; promiseResolve; promiseReject; promise; timer; stdout; stderr; constructor({ cwd, shell, cmd, interactive, pipe_logs = false, exit_expected = false }) { this.shell = shell; this.cmd = cmd; this.cwd = '/mnt/' + cwd.split('\:')[0].toLowerCase() + cwd.split(':')[1].replace(/\\/g, '/'); this.interactive = interactive; this.exit_expected = exit_expected; this.exec = cd "${this.cwd}" &&
${this.cmd};echo END_OF_COMMAND[$?]_
;

Add shell: true to options of vercel build child process spawn
async function getVercelBuildChildProcess(pm, additionalArgs = []) { console.log("trying vercel") const spawnCmd = await pm.getRunExecStruct("vercel", { args: ["build", ...additionalArgs], download: "prefer-if-needed" }); console.log(spawnCmd); if (!spawnCmd) { throw new Error("Error: Failed to generate vercel build command"); } return (0, import_child_process2.spawn)(spawnCmd.cmd, spawnCmd.cmdArgs, {shell: true}); }

After making these tweaks (inside node_modules@cloudflare\next-on-pages\dist\index.js), run powershell/cmd prompt as Administrator and then the build should complete :)

[mackenly]

I'm getting this issue, too. I worked around it by running in WSL Ubuntu. It seems to be Windows specific.

[thomas-desmond]

Making the changes suggested by @danbrownuk I was able to get the npm run pages:build and npm run pages preview to successfully run for a brand new Next.js application created with npm create cloudflare@latest my-next-app -- --framework=next. After the changes I didn't even need WSL to get the Next.js app to finish building.

So at this time to do we not have out of the box support for Windows and Next.js development?

I'm planning to build a full-stack Next.js app that uses multiple Bindings so that will likely be a better test of building and preview environments on Windows.

[Puliczek]

Same problem on my Windows:

[gandli]

Similarly, I'm having this problem

[EdamAme-x]

same issue on WSL