Couldn't deploy next js app on cloudflare pages

fromPlanetEarth · June 27, 2023, 8:00am

I created a simple nextjs project which does nothing but exposes a simple api as i was testing and understanding Workers+Pages.

I created a functions/api/hello.js file on the nextjs project, and checking it on local seems to work fine. To run on local i used wrangler pages dev -- npm run dev and this is working fine on local as i can navigate and run the apis i just created.

But when trying to deploy it to pages, i pushed my code to github and connected it with cloudflare pages. And i selected Next.js on framework preset which runs npx @cloudflare/next-on-pages@1 build command. But my build fails.

[REMOVED REPO CLONING LOGS]
2023-06-27T07:59:00.749722Z	
2023-06-27T07:59:00.863129Z	
2023-06-27T07:59:00.89622Z	Success: Finished cloning repository files
2023-06-27T07:59:01.671059Z	Installing dependencies
2023-06-27T07:59:01.680131Z	Python version set to 2.7
2023-06-27T07:59:05.106884Z	v12.18.0 is already installed.
2023-06-27T07:59:06.300988Z	Now using node v12.18.0 (npm v6.14.4)
2023-06-27T07:59:06.510646Z	Started restoring cached build plugins
2023-06-27T07:59:06.523094Z	Finished restoring cached build plugins
2023-06-27T07:59:06.944702Z	Attempting ruby version 2.7.1, read from environment
2023-06-27T07:59:08.598405Z	Using /opt/buildhome/.rvm/gems/ruby-2.7.1
2023-06-27T07:59:09.646261Z	Using PHP version 5.6
2023-06-27T07:59:09.744664Z	5.2.5 is already installed.
2023-06-27T07:59:09.76283Z	Using Swift version 5.2.5
2023-06-27T07:59:09.763211Z	Started restoring cached node modules
2023-06-27T07:59:09.776026Z	Finished restoring cached node modules
2023-06-27T07:59:10.120579Z	Installing NPM modules using NPM version 6.14.4
2023-06-27T07:59:26.305464Z	npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/@next/swc-darwin-x64):
2023-06-27T07:59:26.306181Z	npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"darwin","arch":"x64"} (current: {"os":"linux","arch":"x64"})
2023-06-27T07:59:26.306423Z	npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/@next/swc-linux-arm64-gnu):
2023-06-27T07:59:26.306559Z	npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"linux","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
2023-06-27T07:59:26.30673Z	npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/@next/swc-darwin-arm64):
2023-06-27T07:59:26.306866Z	npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
2023-06-27T07:59:26.307009Z	npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/@next/swc-linux-arm64-musl):
2023-06-27T07:59:26.307117Z	npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"linux","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
2023-06-27T07:59:26.30723Z	npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/@next/swc-win32-arm64-msvc):
2023-06-27T07:59:26.307332Z	npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"win32","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
2023-06-27T07:59:26.307622Z	npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/@next/swc-win32-x64-msvc):
2023-06-27T07:59:26.30786Z	npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"win32","arch":"x64"} (current: {"os":"linux","arch":"x64"})
2023-06-27T07:59:26.308134Z	npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/@next/swc-win32-ia32-msvc):
2023-06-27T07:59:26.308279Z	npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"win32","arch":"ia32"} (current: {"os":"linux","arch":"x64"})
2023-06-27T07:59:26.308463Z	npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
2023-06-27T07:59:26.308617Z	npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
2023-06-27T07:59:26.308775Z	
2023-06-27T07:59:26.309254Z	added 112 packages from 120 contributors and audited 120 packages in 14.342s
2023-06-27T07:59:26.356525Z	
2023-06-27T07:59:26.356902Z	21 packages are looking for funding
2023-06-27T07:59:26.357143Z	  run `npm fund` for details
2023-06-27T07:59:26.357293Z	
2023-06-27T07:59:26.35742Z	found 0 vulnerabilities
2023-06-27T07:59:26.357606Z	
2023-06-27T07:59:26.380209Z	NPM modules installed
2023-06-27T07:59:26.453942Z	Installing Hugo 0.54.0
2023-06-27T07:59:27.296797Z	Hugo Static Site Generator v0.54.0-B1A82C61A/extended linux/amd64 BuildDate: 2019-02-01T10:04:38Z
2023-06-27T07:59:27.300717Z	Started restoring cached go cache
2023-06-27T07:59:27.315974Z	Finished restoring cached go cache
2023-06-27T07:59:27.410473Z	go version go1.14.4 linux/amd64
2023-06-27T07:59:27.424272Z	go version go1.14.4 linux/amd64
2023-06-27T07:59:27.429207Z	Installing missing commands
2023-06-27T07:59:27.429535Z	Verify run directory
2023-06-27T07:59:27.429693Z	Executing user command: npx @cloudflare/next-on-pages@1
2023-06-27T07:59:34.695246Z	/opt/buildhome/.npm/_npx/1225/lib/node_modules/@cloudflare/next-on-pages/dist/index.js:6172
2023-06-27T07:59:34.695771Z	          value = parts[1] ?? null;
2023-06-27T07:59:34.695986Z	                            ^
2023-06-27T07:59:34.696139Z	
2023-06-27T07:59:34.696254Z	SyntaxError: Unexpected token '?'
2023-06-27T07:59:34.696359Z	    at wrapSafe (internal/modules/cjs/loader.js:1054:16)
2023-06-27T07:59:34.696463Z	    at Module._compile (internal/modules/cjs/loader.js:1102:27)
2023-06-27T07:59:34.696564Z	    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
2023-06-27T07:59:34.696665Z	    at Module.load (internal/modules/cjs/loader.js:986:32)
2023-06-27T07:59:34.696766Z	    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
2023-06-27T07:59:34.696867Z	    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
2023-06-27T07:59:34.697004Z	    at internal/main/run_main_module.js:17:47
2023-06-27T07:59:34.871294Z	Failed: build command exited with code: 1
2023-06-27T07:59:35.545385Z	Failed: error occurred while running build command

Luis.Cardoso · June 27, 2023, 10:09am

Hi @fromPlanetEarth,

I’m sorry to read that your build fails. I see in the logs a SyntaxError: Unexpected token '?' .

Could you open a support ticket reporting this issue, so we can proceed investigating this SyntaxError further?

You can check and create a ticket on your Cloudflare Dashboard:

1.View open support tickets
2.Log in to your Cloudflare account.
3.Select Help Center from Support dropdown.
4.Click Sign In if it appears in the top-right corner; otherwise, click on your name or profile picture.
5.Click My Activities & Requests.
Full information: https://support.cloudflare.com/hc/en-us/articles/200172476-Contacting-Cloudflare-Support

Let us know if you need any help.

fromPlanetEarth · June 27, 2023, 10:25am

Looks like i wont be able to submit ticket as of now,

Because of;

Customers on our Free plans can only submit tickets for billing, account, and registrar issues.

WalshyMVP · June 27, 2023, 11:05am

You need to provide the NODE_VERSION environment variable with a value of 16 or higher

Docs:

Next.js setup: Deploy a Next.js site · Cloudflare Pages docs
Env vars: Language support and tools · Cloudflare Pages docs

fromPlanetEarth · June 27, 2023, 12:21pm

Awesome, the build is now working fine.
But, when i access my site, i get an error stating:
Error: Could not access built-in Node.js modules. Please make sure that your Cloudflare Pages project has the 'nodejs_compat' compatibility flag set.

even though, i have set this compatibility flag on wrangler.toml

Is there anything i have missed again ?

Walshy · June 27, 2023, 12:38pm

Again as per the docs above:

In your Pages project, go to Settings > Functions > Compatibility Flags.

Configure a nodejs_compat flag for both production and preview.

Above Compability Flags, go to Compatibility Date and configure a compatibility date that is at least 2022-11-30 for both production and preview.

fromPlanetEarth · June 28, 2023, 7:33pm

Thank You. It’s working for me now.

system · July 1, 2023, 7:33pm

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.