Next js 13 - cloudflare pages build error

Hi i am using Cloudflare pages to deploy my next js app but it is throwing errors during build time.

2022-11-01T09:32:06.063433Z	Cloning repository...
2022-11-01T09:32:07.278642Z	From https://github.com/diptnc/nextjsexperimentalapp
2022-11-01T09:32:07.279296Z	 * branch            2b9a7239bec4e649faa6daea2b64d6eed2e0fd1e -> FETCH_HEAD
2022-11-01T09:32:07.279489Z	
2022-11-01T09:32:07.316867Z	HEAD is now at 2b9a723 depoertldfl
2022-11-01T09:32:07.317430Z	
2022-11-01T09:32:07.454284Z	
2022-11-01T09:32:07.480775Z	Success: Finished cloning repository files
2022-11-01T09:32:08.074441Z	Installing dependencies
2022-11-01T09:32:08.086501Z	Python version set to 2.7
2022-11-01T09:32:11.338804Z	Downloading and installing node v16.8.0...
2022-11-01T09:32:11.775397Z	Downloading https://nodejs.org/dist/v16.8.0/node-v16.8.0-linux-x64.tar.xz...
2022-11-01T09:32:12.203172Z	Computing checksum with sha256sum
2022-11-01T09:32:12.330493Z	Checksums matched!
2022-11-01T09:32:16.523007Z	Now using node v16.8.0 (npm v7.21.0)
2022-11-01T09:32:16.926127Z	Started restoring cached build plugins
2022-11-01T09:32:16.939344Z	Finished restoring cached build plugins
2022-11-01T09:32:17.456580Z	Attempting ruby version 2.7.1, read from environment
2022-11-01T09:32:20.994815Z	Using ruby version 2.7.1
2022-11-01T09:32:21.343149Z	Using PHP version 5.6
2022-11-01T09:32:21.500877Z	5.2 is already installed.
2022-11-01T09:32:21.527268Z	Using Swift version 5.2
2022-11-01T09:32:21.527977Z	Started restoring cached node modules
2022-11-01T09:32:21.543516Z	Finished restoring cached node modules
2022-11-01T09:32:21.966850Z	Installing NPM modules using NPM version 7.21.0
2022-11-01T09:32:28.188683Z	
2022-11-01T09:32:28.188990Z	added 19 packages, and audited 20 packages in 6s
2022-11-01T09:32:28.189159Z	
2022-11-01T09:32:28.189302Z	2 packages are looking for funding
2022-11-01T09:32:28.189417Z	  run `npm fund` for details
2022-11-01T09:32:28.190198Z	
2022-11-01T09:32:28.190383Z	found 0 vulnerabilities
2022-11-01T09:32:28.201728Z	NPM modules installed
2022-11-01T09:32:28.705517Z	Installing Hugo 0.54.0
2022-11-01T09:32:39.442737Z	Hugo Static Site Generator v0.54.0-B1A82C61A/extended linux/amd64 BuildDate: 2019-02-01T10:04:38Z
2022-11-01T09:32:39.447185Z	Started restoring cached go cache
2022-11-01T09:32:39.465494Z	Finished restoring cached go cache
2022-11-01T09:32:39.611124Z	go version go1.14.4 linux/amd64
2022-11-01T09:32:39.627167Z	go version go1.14.4 linux/amd64
2022-11-01T09:32:39.630166Z	Installing missing commands
2022-11-01T09:32:39.630424Z	Verify run directory
2022-11-01T09:32:39.630561Z	Executing user command: npx @cloudflare/next-on-pages --experimental-minify
2022-11-01T09:32:40.459298Z	npm WARN exec The following package was not found and will be installed: @cloudflare/next-on-pages
2022-11-01T09:32:48.960089Z	⚡️ @cloudflare/next-to-pages CLI
2022-11-01T09:32:48.964282Z	⚡️
2022-11-01T09:32:48.964557Z	⚡️ Installing 'vercel' CLI...
2022-11-01T09:32:48.964698Z	⚡️
2022-11-01T09:32:53.175108Z	▲ 
2022-11-01T09:32:53.175435Z	▲ added 213 packages, and audited 233 packages in 4s
2022-11-01T09:32:53.175606Z	▲ 
2022-11-01T09:32:53.175761Z	▲ 
2022-11-01T09:32:53.175918Z	▲ 29 packages are looking for funding
2022-11-01T09:32:53.176046Z	▲   run `npm fund` for details
2022-11-01T09:32:53.176176Z	▲ 
2022-11-01T09:32:53.188499Z	▲ 
2022-11-01T09:32:53.188734Z	▲ 5 moderate severity vulnerabilities
2022-11-01T09:32:53.188869Z	▲ 
2022-11-01T09:32:53.189000Z	▲ To address all issues, run:
2022-11-01T09:32:53.189114Z	▲   npm audit fix
2022-11-01T09:32:53.189260Z	▲ 
2022-11-01T09:32:53.189384Z	▲ Run `npm audit` for details.
2022-11-01T09:32:53.189495Z	▲ 
2022-11-01T09:32:53.200081Z	⚡️
2022-11-01T09:32:53.200324Z	⚡️
2022-11-01T09:32:53.200482Z	⚡️ Completed 'npx vercel build'.
2022-11-01T09:32:53.200625Z	⚡️
2022-11-01T09:32:53.200743Z	⚡️
2022-11-01T09:32:53.200856Z	⚡️ Building project with 'npx vercel build'...
2022-11-01T09:32:53.201005Z	⚡️
2022-11-01T09:32:54.333481Z	▲ Vercel CLI 28.4.12
2022-11-01T09:32:54.333854Z	▲ 
2022-11-01T09:32:54.695141Z	▲ Installing dependencies...
2022-11-01T09:32:54.695469Z	▲ 
2022-11-01T09:32:55.513652Z	▲ 
2022-11-01T09:32:55.513969Z	▲ up to date in 644ms
2022-11-01T09:32:55.514128Z	▲ 
2022-11-01T09:32:55.514287Z	▲ 
2022-11-01T09:32:55.514418Z	▲ 
2022-11-01T09:32:55.514585Z	▲ 29 packages are looking for funding
2022-11-01T09:32:55.514704Z	▲   run `npm fund` for details
2022-11-01T09:32:55.514815Z	▲ 
2022-11-01T09:32:55.523798Z	▲ Detected Next.js version: 13.0.1
2022-11-01T09:32:55.524163Z	▲ 
2022-11-01T09:32:55.529744Z	▲ Detected `package-lock.json` generated by npm 7+...
2022-11-01T09:32:55.530087Z	▲ 
2022-11-01T09:32:55.530379Z	▲ Running "npm run build"
2022-11-01T09:32:55.530619Z	▲ 
2022-11-01T09:32:55.881319Z	▲ 
2022-11-01T09:32:55.881630Z	▲ > [email protected] build
2022-11-01T09:32:55.881786Z	▲ > next build
2022-11-01T09:32:55.881928Z	▲ 
2022-11-01T09:32:55.882050Z	▲ 
2022-11-01T09:32:56.435542Z	▲ warn  - You have enabled experimental features (appDir, runtime) in next.config.js.
2022-11-01T09:32:56.435878Z	▲ 
2022-11-01T09:32:56.436086Z	▲ warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
2022-11-01T09:32:56.436271Z	▲ 
2022-11-01T09:32:56.436397Z	▲ 
2022-11-01T09:32:56.436518Z	▲ 
2022-11-01T09:32:56.436631Z	▲ info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
2022-11-01T09:32:56.436744Z	▲ 
2022-11-01T09:32:56.494174Z	▲ Attention: Next.js now collects completely anonymous telemetry regarding usage.
2022-11-01T09:32:56.494626Z	▲ This information is used to shape Next.js' roadmap and prioritize features.
2022-11-01T09:32:56.494900Z	▲ 
2022-11-01T09:32:56.495162Z	▲ You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
2022-11-01T09:32:56.495316Z	▲ https://nextjs.org/telemetry
2022-11-01T09:32:56.495569Z	▲ 
2022-11-01T09:32:56.495791Z	▲ 
2022-11-01T09:32:56.624454Z	▲ info  - Creating an optimized production build...
2022-11-01T09:32:56.624957Z	▲ 
2022-11-01T09:32:56.671820Z	▲ warn  - You are using the experimental Edge Runtime with `experimental.runtime`.
2022-11-01T09:32:56.672074Z	▲ 
2022-11-01T09:33:03.527617Z	▲ info  - Compiled successfully
2022-11-01T09:33:03.527951Z	▲ 
2022-11-01T09:33:03.528108Z	▲ info  - Linting and checking validity of types...
2022-11-01T09:33:03.528246Z	▲ 
2022-11-01T09:33:03.947550Z	▲ info  - Collecting page data...
2022-11-01T09:33:03.947828Z	▲ 
2022-11-01T09:33:08.882544Z	▲ info  - Generating static pages (0/2)
2022-11-01T09:33:08.882834Z	▲ 
2022-11-01T09:33:08.967246Z	▲ info  - Generating static pages (2/2)
2022-11-01T09:33:08.967513Z	▲ 
2022-11-01T09:33:08.982311Z	▲ info  - Finalizing page optimization...
2022-11-01T09:33:08.982732Z	▲ 
2022-11-01T09:33:08.986218Z	▲ 
2022-11-01T09:33:08.986429Z	▲ 
2022-11-01T09:33:09.005038Z	▲ Route (app)                                Size     First Load JS
2022-11-01T09:33:09.005238Z	▲ ─ ℇ /                                      0 B                0 B
2022-11-01T09:33:09.005384Z	▲ + First Load JS shared by all              64.2 kB
2022-11-01T09:33:09.005503Z	▲   ├ chunks/17-521a5439222a82c0.js          62 kB
2022-11-01T09:33:09.005616Z	▲   ├ chunks/main-app-c5031435e4d1ed94.js    200 B
2022-11-01T09:33:09.005727Z	▲   └ chunks/webpack-9e765e27c32b1a64.js     2.07 kB
2022-11-01T09:33:09.005869Z	▲ 
2022-11-01T09:33:09.006024Z	▲ Route (pages)                              Size     First Load JS
2022-11-01T09:33:09.006155Z	▲ ┌ ○ /404                                   179 B          79.8 kB
2022-11-01T09:33:09.006274Z	▲ └ ℇ /api/hello                             0 B            79.6 kB
2022-11-01T09:33:09.006388Z	▲ + First Load JS shared by all              79.6 kB
2022-11-01T09:33:09.006513Z	▲   ├ chunks/main-89022d600e76ddf0.js        77.4 kB
2022-11-01T09:33:09.006628Z	▲   ├ chunks/pages/_app-9f5490aa3d56632f.js  192 B
2022-11-01T09:33:09.006745Z	▲   └ chunks/webpack-9e765e27c32b1a64.js     2.07 kB
2022-11-01T09:33:09.006901Z	▲ 
2022-11-01T09:33:09.007058Z	▲ 
2022-11-01T09:33:09.007179Z	▲ ℇ  (Streaming)  server-side renders with streaming (uses React 18 SSR streaming or Server Components)
2022-11-01T09:33:09.007304Z	▲ ○  (Static)     automatically rendered as static HTML (uses no initial props)
2022-11-01T09:33:09.007421Z	▲ 
2022-11-01T09:33:09.007534Z	▲ 
2022-11-01T09:33:10.382530Z	▲ Traced Next.js server files in: 1.227s
2022-11-01T09:33:10.383009Z	▲ 
2022-11-01T09:33:11.045775Z	▲ Created all serverless functions in: 662.849ms
2022-11-01T09:33:11.046105Z	▲ 
2022-11-01T09:33:11.190877Z	▲ Collected static files (public/, static/, .next/static): 5.586ms
2022-11-01T09:33:11.191304Z	▲ 
2022-11-01T09:33:11.234335Z	▲ Build Completed in .vercel/output [17s]
2022-11-01T09:33:11.234614Z	▲ 
2022-11-01T09:33:11.300015Z	⚡️
2022-11-01T09:33:11.300304Z	⚡️
2022-11-01T09:33:11.300488Z	⚡️ Completed 'npx vercel build'.
2022-11-01T09:33:11.300668Z	⚡️
2022-11-01T09:33:11.445166Z	/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/@cloudflare/next-on-pages/dist/index.js:3057
2022-11-01T09:33:11.445484Z	  var err = new SyntaxError(message);
2022-11-01T09:33:11.445643Z	            ^
2022-11-01T09:33:11.445816Z	
2022-11-01T09:33:11.445985Z	SyntaxError: Identifier 'n' has already been declared (232:9643)
2022-11-01T09:33:11.446119Z	    at Parser2.pp$4.raise (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/@cloudflare/next-on-pages/dist/index.js:3057:13)
2022-11-01T09:33:11.446271Z	    at Parser2.pp$3.declareName (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/@cloudflare/next-on-pages/dist/index.js:3123:10)
2022-11-01T09:33:11.446417Z	    at Parser2.pp$7.checkLValSimple (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/@cloudflare/next-on-pages/dist/index.js:1858:16)
2022-11-01T09:33:11.446555Z	    at Parser2.pp$7.checkLValPattern (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/@cloudflare/next-on-pages/dist/index.js:1898:12)
2022-11-01T09:33:11.446707Z	    at Parser2.pp$8.parseVarId (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/@cloudflare/next-on-pages/dist/index.js:1193:8)
2022-11-01T09:33:11.446874Z	    at Parser2.pp$8.parseVar (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/@cloudflare/next-on-pages/dist/index.js:1174:10)
2022-11-01T09:33:11.447035Z	    at Parser2.pp$8.parseVarStatement (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/@cloudflare/next-on-pages/dist/index.js:1064:8)
2022-11-01T09:33:11.447189Z	    at Parser2.pp$8.parseStatement (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/@cloudflare/next-on-pages/dist/index.js:803:19)
2022-11-01T09:33:11.447362Z	    at Parser2.pp$8.parseBlock (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/@cloudflare/next-on-pages/dist/index.js:1128:21)
2022-11-01T09:33:11.447515Z	    at Parser2.pp$5.parseFunctionBody (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/@cloudflare/next-on-pages/dist/index.js:2912:22) {
2022-11-01T09:33:11.447667Z	  pos: 77838,
2022-11-01T09:33:11.447800Z	  loc: Position2 { line: 232, column: 9643 },
2022-11-01T09:33:11.447965Z	  raisedAt: 77840
2022-11-01T09:33:11.448130Z	}
2022-11-01T09:33:11.468275Z	Failed: build command exited with code: 1

Next.js 13 is not supported yet. Follow Next.js 13 · Issue #9 · cloudflare/next-on-pages · GitHub for updates.

Thanks

Hi @cherryjimbo

SO what i need to do now to make it work on Cloudflare pages. Thanks

It looks like if you update to the latest version of @cloudflare/next-on-pages, things should now work with Next.js 13. If not, I’d recommend filing an issue on the repo at GitHub - cloudflare/next-on-pages

Hi @cherryjimbo

If i use next.js static i recieve this error

nvm is not compatible with the npm config "prefix" option: currently set to ""
18:25:05.327	Run `npm config delete prefix` or `nvm use --delete-prefix v19.1.0` to unset it.
18:25:05.328	Failed to install node version '19.1.0'
18:25:05.332	Failed: build command exited with code: 1
18:25:07.870	Failed: an internal error occurred

What should i do?

thanks

Pages only supports up to Node.js 17 today. You will need to drop your Node.js version to 16 or 17 (via .nvmrc or NODE_VERSION.

1 Like

Hi @cherryjimbo

There is something wrong with Cloudflare pages build as all the sudden in the next build it started installing hugo??? which has nothing to do with this next.js repo. Any idea what is happening here?

Thanks

|18:28:15.871|Success: Finished cloning repository files|
|---|---|
|18:28:16.470|Installing dependencies|
|18:28:16.480|Python version set to 2.7|
|18:28:19.160|Downloading and installing node v17.9.0...|
|18:28:19.519|Downloading https://nodejs.org/dist/v17.9.0/node-v17.9.0-linux-x64.tar.xz...|
|18:28:19.925|Computing checksum with sha256sum|
|18:28:20.047|Checksums matched!|
|18:28:24.289|Now using node v17.9.0 (npm v8.5.5)|
|18:28:24.590|Started restoring cached build plugins|
|18:28:24.600|Finished restoring cached build plugins|
|18:28:24.996|Attempting ruby version 2.7.1, read from environment|
|18:28:27.841|Using ruby version 2.7.1|
|18:28:28.143|Using PHP version 5.6|
|18:28:28.268|5.2 is already installed.|
|18:28:28.292|Using Swift version 5.2|
|18:28:28.292|Started restoring cached node modules|
|18:28:28.305|Finished restoring cached node modules|
|18:28:28.707|Installing NPM modules using NPM version 8.5.5|
|18:28:29.603|npm WARN old lockfile |
|18:28:29.604|npm WARN old lockfile The package-lock.json file was created with an old version of npm,|
|18:28:29.604|npm WARN old lockfile so supplemental metadata must be fetched from the registry.|
|18:28:29.604|npm WARN old lockfile |
|18:28:29.604|npm WARN old lockfile This is a one-time fix-up, please be patient...|
|18:28:29.604|npm WARN old lockfile |
|18:28:42.053||
|18:28:42.054|added 290 packages, and audited 291 packages in 13s|
|18:28:42.054||
|18:28:42.054|96 packages are looking for funding|
|18:28:42.054|  run `npm fund` for details|
|18:28:42.055||
|18:28:42.055|found 0 vulnerabilities|
|18:28:42.078|NPM modules installed|
|18:28:42.553|Installing Hugo 0.54.0|
|18:28:43.348|Hugo Static Site Generator v0.54.0-B1A82C61A/extended linux/amd64 BuildDate: 2019-02-01T10:04:38Z|
|18:28:43.352|Started restoring cached go cache|
|18:28:43.368|Finished restoring cached go cache|
|18:28:43.484|go version go1.14.4 linux/amd64|
|18:28:43.496|go version go1.14.4 linux/amd64|
|18:28:43.498|Installing missing commands|
|18:28:43.499|Verify run directory|
|18:28:43.499|Executing user command: next build && next export|
|18:28:43.989|error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error|
|18:28:43.997||
|18:28:43.997|> Build error occurred|
|18:28:43.998|/opt/buildhome/repo/next.config.js:1|
|18:28:43.998|/** @type {import('next').NextConfig} */const nextConfig = {+  experimental: {+    runtime: 'experimental-edge',+  },  reactStrictMode: true,  swcMinify: true,}|
|18:28:43.999|                                                            ^|
|18:28:43.999||
|18:28:43.999|SyntaxError: Unexpected token '+'|
|18:28:43.999|    at Object.compileFunction (node:vm:352:18)|
|18:28:43.999|    at wrapSafe (node:internal/modules/cjs/loader:1027:15)|
|18:28:43.999|    at Module._compile (node:internal/modules/cjs/loader:1063:27)|
|18:28:43.999|    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)|
|18:28:43.999|    at Module.load (node:internal/modules/cjs/loader:975:32)|
|18:28:44.000|    at Function.Module._load (node:internal/modules/cjs/loader:822:12)|
|18:28:44.000|    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)|
|18:28:44.000|    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)|
|18:28:44.000|    at async Promise.all (index 0)|
|18:28:44.000|    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)|
|18:28:44.008|Failed: build command exited with code: 1|
|18:28:44.813|Failed: an internal error occurred|

This is expected behaviour - the Pages build image installs a lot of different common tools for building websites, Hugo being one of them. They will not impact your site.

Looking at your error log there:

|18:28:43.998|/opt/buildhome/repo/next.config.js:1|
|18:28:43.998|/** @type {import('next').NextConfig} */const nextConfig = {+  experimental: {+    runtime: 'experimental-edge',+  },  reactStrictMode: true,  swcMinify: true,}|
|18:28:43.999|                                                            ^|
|18:28:43.999||
|18:28:43.999|SyntaxError: Unexpected token '+'|
|18:28:43.999|    at Object.compileFunction (node:vm:352:18)|
|18:28:43.999|    at wrapSafe (node:internal/modules/cjs/loader:1027:15)|
|18:28:43.999|    at Module._compile (node:internal/modules/cjs/loader:1063:27)|
|18:28:43.999|    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)|
|18:28:43.999|    at Module.load (node:internal/modules/cjs/loader:975:32)|
|18:28:44.000|    at Function.Module._load (node:internal/modules/cjs/loader:822:12)|
|18:28:44.000|    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)|
|18:28:44.000|    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)|
|18:28:44.000|    at async Promise.all (index 0)|
|18:28:44.000|    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)|
|18:28:44.008|Failed: build command exited with code: 1|
|18:28:44.813|Failed: an internal error occurred|

It seems like your next.config.js file has issues.

1 Like

Hi @cherryjimbo

I copy paste the code in next.config.js from Cloudflare documentation on how to deploy next.js on Cloudflare pages.

here is the code:

/** @type {import('next').NextConfig} */const nextConfig = {+  experimental: {+    runtime: 'experimental-edge',+  },  reactStrictMode: true,  swcMinify: true,}
module.exports = nextConfig

image

remove + sign

1 Like

That is not valid JavaScript. It looks like you’ve copied the diff from the documentation:

This diff is suggesting you add the following to your config:

experimental: {
  runtime: 'experimental-edge',
},

So your config might end up looking something like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    runtime: 'experimental-edge',
  },
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

I would recommend that you run and test this locally before pushing to Pages - trying to debug remotely with Pages or any CI builds is likely to be a slow and painful experience.

1 Like

Thanks @cherryjimbo

This now bring me back to the original failure

|18:36:15.127|Success: Finished cloning repository files|
|---|---|
|18:36:15.801|Installing dependencies|
|18:36:15.811|Python version set to 2.7|
|18:36:19.073|Downloading and installing node v17.9.0...|
|18:36:19.516|Downloading https://nodejs.org/dist/v17.9.0/node-v17.9.0-linux-x64.tar.xz...|
|18:36:20.011|Computing checksum with sha256sum|
|18:36:20.143|Checksums matched!|
|18:36:25.073|Now using node v17.9.0 (npm v8.5.5)|
|18:36:25.423|Started restoring cached build plugins|
|18:36:25.435|Finished restoring cached build plugins|
|18:36:25.892|Attempting ruby version 2.7.1, read from environment|
|18:36:29.206|Using ruby version 2.7.1|
|18:36:29.549|Using PHP version 5.6|
|18:36:29.703|5.2 is already installed.|
|18:36:29.728|Using Swift version 5.2|
|18:36:29.728|Started restoring cached node modules|
|18:36:29.744|Finished restoring cached node modules|
|18:36:30.225|Installing NPM modules using NPM version 8.5.5|
|18:36:31.298|npm WARN old lockfile |
|18:36:31.298|npm WARN old lockfile The package-lock.json file was created with an old version of npm,|
|18:36:31.299|npm WARN old lockfile so supplemental metadata must be fetched from the registry.|
|18:36:31.299|npm WARN old lockfile |
|18:36:31.299|npm WARN old lockfile This is a one-time fix-up, please be patient...|
|18:36:31.299|npm WARN old lockfile |
|18:36:45.570||
|18:36:45.570|added 290 packages, and audited 291 packages in 15s|
|18:36:45.571||
|18:36:45.571|96 packages are looking for funding|
|18:36:45.571|  run `npm fund` for details|
|18:36:45.572||
|18:36:45.572|found 0 vulnerabilities|
|18:36:45.596|NPM modules installed|
|18:36:46.163|Installing Hugo 0.54.0|
|18:36:46.848|Hugo Static Site Generator v0.54.0-B1A82C61A/extended linux/amd64 BuildDate: 2019-02-01T10:04:38Z|
|18:36:46.852|Started restoring cached go cache|
|18:36:46.870|Finished restoring cached go cache|
|18:36:47.018|go version go1.14.4 linux/amd64|
|18:36:47.032|go version go1.14.4 linux/amd64|
|18:36:47.035|Installing missing commands|
|18:36:47.035|Verify run directory|
|18:36:47.035|Executing user command: next build && next export|
|18:36:47.590|warn  - Detected next.config.js, no exported configuration found. https://nextjs.org/docs/messages/empty-configuration|
|18:36:47.593|warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache|
|18:36:47.646|Attention: Next.js now collects completely anonymous telemetry regarding usage.|
|18:36:47.647|This information is used to shape Next.js' roadmap and prioritize features.|
|18:36:47.647|You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:|
|18:36:47.647|https://nextjs.org/telemetry|
|18:36:47.647||
|18:36:47.843|info  - Linting and checking validity of types...|
|18:36:49.914||
|18:36:49.914|./pages/api/hello.js|
|18:36:49.914|6:1  Warning: Unexpected default export of anonymous function  import/no-anonymous-default-export|
|18:36:49.914||
|18:36:49.914|./pages/login.js|
|18:36:49.914|28:11  Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element|
|18:36:49.914||
|18:36:49.915|./pages/signup.js|
|18:36:49.915|8:11  Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element|
|18:36:49.915||
|18:36:49.915|./components/Header/index.js|
|18:36:49.915|33:19  Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element|
|18:36:49.915|38:19  Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element|
|18:36:49.915|116:23  Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element|
|18:36:49.915|205:19  Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element|
|18:36:49.916||
|18:36:49.916|info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules|
|18:36:49.934|info  - Creating an optimized production build...|
|18:36:49.970|warn  - You are using an experimental edge runtime, the API might change.|
|18:36:56.970|info  - Compiled successfully|
|18:36:56.971|info  - Collecting page data...|
|18:37:02.400|info  - Generating static pages (0/6)|
|18:37:02.493|info  - Generating static pages (1/6)|
|18:37:02.503|info  - Generating static pages (2/6)|
|18:37:02.523|info  - Generating static pages (4/6)|
|18:37:02.803|info  - Generating static pages (6/6)|
|18:37:02.813|info  - Finalizing page optimization...|
|18:37:02.821||
|18:37:02.854|Route (pages)                              Size     First Load JS|
|18:37:02.854|┌ ○ /                                      4.32 kB        77.4 kB|
|18:37:02.854|├   └ css/7c9e31c2156353a4.css             706 B|
|18:37:02.854|├   /_app                                  0 B            73.1 kB|
|18:37:02.855|├ ○ /404                                   181 B          73.3 kB|
|18:37:02.855|├ ℇ /api/hello                             0 B            73.1 kB|
|18:37:02.855|├ ○ /layout (309 ms)                       12.8 kB        85.9 kB|
|18:37:02.855|├ ○ /login                                 2.06 kB        75.2 kB|
|18:37:02.855|└ ○ /signup                                1.41 kB        74.5 kB|
|18:37:02.855|+ First Load JS shared by all              77.8 kB|
|18:37:02.855|  ├ chunks/framework-3b5a00d5d7e8d93b.js   45.4 kB|
|18:37:02.856|  ├ chunks/main-50de763069eba4b2.js        26.7 kB|
|18:37:02.856|  ├ chunks/pages/_app-2398585b21d2d8c8.js  285 B|
|18:37:02.856|  ├ chunks/webpack-8fa1640cc84ba8fe.js     750 B|
|18:37:02.856|  └ css/98ed43b0b54a14b5.css               4.71 kB|
|18:37:02.856||
|18:37:02.856|ℇ  (Streaming)  server-side renders with streaming (uses React 18 SSR streaming or Server Components)|
|18:37:02.856|○  (Static)     automatically rendered as static HTML (uses no initial props)|
|18:37:02.856||
|18:37:03.364|warn  - Detected next.config.js, no exported configuration found. https://nextjs.org/docs/messages/empty-configuration|
|18:37:03.599|info  - using build directory: /opt/buildhome/repo/.next|
|18:37:03.616|info  - Copying static build directory|
|18:37:03.624|info  - No exportPathMap found in /opt/buildhome/repo/next.config.js. Generating map from ./pages|
|18:37:03.627|Error: Image Optimization using Next.js' default loader is not compatible with `next export`.|
|18:37:03.627|  Possible solutions:|
|18:37:03.627|    - Use `next start` to run a server, which includes the Image Optimization API.|
|18:37:03.627|    - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.|
|18:37:03.628|  Read more: https://nextjs.org/docs/messages/export-image-api|
|18:37:03.628|    at /opt/buildhome/repo/node_modules/next/dist/export/index.js:152:23|
|18:37:03.628|    at async Span.traceAsyncFn (/opt/buildhome/repo/node_modules/next/dist/trace/trace.js:79:20)|
|18:37:03.638|Failed: build command exited with code: 1|
|18:37:04.623|Failed: an internal error occurred|

What i am wondering is that i have connected the same repo to netlify which works great but the same repo with Cloudflare is making alot of issues. So just to let you know that repo is good and it builds on netlify. I made changes to repo to make it work on Cloudflare but cannot get it to work :frowning:

Detected next.config.js, no exported configuration found. https://nextjs.org/docs/messages/empty-configuration|

This seems like an important issue to me.

As well as this:
Error: Image Optimization using Next.js' default loader is not compatible with next export.|

It seems like maybe your repo isn’t designed to work with next export?

1 Like

Hi @cherryjimbo

It work on netlify https://zippy-mandazi-56c05f.netlify.app/

I have tried multiple options in Cloudflare like next or next static to see if it works also the repo is very basic the default nextjs repo nothing special.

I have modified the nodejs version, what else should i do to make it work?

Thanks


Finally got successfull build

Finally got success message for nextjs build

|18:49:09.548|Success: Finished cloning repository files|
|---|---|
|18:49:10.311|Installing dependencies|
|18:49:10.322|Python version set to 2.7|
|18:49:13.905|Downloading and installing node v17.9.0...|
|18:49:14.365|Downloading https://nodejs.org/dist/v17.9.0/node-v17.9.0-linux-x64.tar.xz...|
|18:49:15.553|Computing checksum with sha256sum|
|18:49:15.685|Checksums matched!|
|18:49:20.921|Now using node v17.9.0 (npm v8.5.5)|
|18:49:21.346|Started restoring cached build plugins|
|18:49:21.360|Finished restoring cached build plugins|
|18:49:21.926|Attempting ruby version 2.7.1, read from environment|
|18:49:25.748|Using ruby version 2.7.1|
|18:49:26.112|Using PHP version 5.6|
|18:49:26.274|5.2 is already installed.|
|18:49:26.300|Using Swift version 5.2|
|18:49:26.301|Started restoring cached node modules|
|18:49:26.316|Finished restoring cached node modules|
|18:49:26.832|Installing NPM modules using NPM version 8.5.5|
|18:49:27.944|npm WARN old lockfile |
|18:49:27.944|npm WARN old lockfile The package-lock.json file was created with an old version of npm,|
|18:49:27.944|npm WARN old lockfile so supplemental metadata must be fetched from the registry.|
|18:49:27.945|npm WARN old lockfile |
|18:49:27.945|npm WARN old lockfile This is a one-time fix-up, please be patient...|
|18:49:27.945|npm WARN old lockfile |
|18:49:42.753||
|18:49:42.753|added 290 packages, and audited 291 packages in 15s|
|18:49:42.753||
|18:49:42.753|96 packages are looking for funding|
|18:49:42.754|  run `npm fund` for details|
|18:49:42.756||
|18:49:42.756|found 0 vulnerabilities|
|18:49:42.781|NPM modules installed|
|18:49:43.503|Installing Hugo 0.54.0|
|18:49:44.383|Hugo Static Site Generator v0.54.0-B1A82C61A/extended linux/amd64 BuildDate: 2019-02-01T10:04:38Z|
|18:49:44.387|Started restoring cached go cache|
|18:49:44.409|Finished restoring cached go cache|
|18:49:44.559|go version go1.14.4 linux/amd64|
|18:49:44.576|go version go1.14.4 linux/amd64|
|18:49:44.579|Installing missing commands|
|18:49:44.580|Verify run directory|
|18:49:44.580|Executing user command: npx @cloudflare/next-on-pages --experimental-minify|
|18:49:45.795|npm WARN exec The following package was not found and will be installed: @cloudflare/next-on-pages|
|18:49:53.674|⚡️ @cloudflare/next-to-pages CLI|
|18:49:53.679|⚡️|
|18:49:53.680|⚡️ Installing 'vercel' CLI...|
|18:49:53.680|⚡️|
|18:49:58.761|▲ |
|18:49:58.761|▲ added 170 packages, and audited 461 packages in 5s|
|18:49:58.761|▲ |
|18:49:58.762|▲ |
|18:49:58.762|▲ 113 packages are looking for funding|
|18:49:58.762|▲   run `npm fund` for details|
|18:49:58.763|▲ |
|18:49:58.772|▲ |
|18:49:58.772|▲ 5 moderate severity vulnerabilities|
|18:49:58.772|▲ |
|18:49:58.772|▲ To address all issues, run:|
|18:49:58.773|▲   npm audit fix|
|18:49:58.773|▲ |
|18:49:58.773|▲ Run `npm audit` for details.|
|18:49:58.773|▲ |
|18:49:58.788|⚡️|
|18:49:58.788|⚡️|
|18:49:58.788|⚡️ Completed 'npx vercel build'.|
|18:49:58.788|⚡️|
|18:49:58.788|⚡️|
|18:49:58.788|⚡️ Building project with 'npx vercel build'...|
|18:49:58.789|⚡️|
|18:50:00.064|▲ Vercel CLI 28.5.5|
|18:50:00.064|▲ |
|18:50:00.458|▲ Installing dependencies...|
|18:50:00.458|▲ |
|18:50:01.498|▲ |
|18:50:01.499|▲ up to date in 828ms|
|18:50:01.499|▲ |
|18:50:01.500|▲ |
|18:50:01.500|▲ 113 packages are looking for funding|
|18:50:01.500|▲   run `npm fund` for details|
|18:50:01.500|▲ |
|18:50:01.512|▲ Detected Next.js version: 13.0.4|
|18:50:01.512|▲ |
|18:50:01.520|▲ Detected `package-lock.json` generated by npm 7+...|
|18:50:01.520|▲ |
|18:50:01.520|▲ Running npm run build|
|18:50:01.521|▲ |
|18:50:02.024|▲ |
|18:50:02.025|▲ > [email protected] build|
|18:50:02.025|▲ > next build|
|18:50:02.025|▲ |
|18:50:02.025|▲ |
|18:50:02.619|▲ warn  - You have enabled experimental feature (runtime) in next.config.js.|
|18:50:02.619|▲ |
|18:50:02.620|▲ warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.|
|18:50:02.620|▲ |
|18:50:02.620|▲ |
|18:50:02.620|▲ |
|18:50:02.663|▲ Attention: Next.js now collects completely anonymous telemetry regarding usage.|
|18:50:02.664|▲ |
|18:50:02.664|▲ This information is used to shape Next.js' roadmap and prioritize features.|
|18:50:02.664|▲ You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:|
|18:50:02.664|▲ https://nextjs.org/telemetry|
|18:50:02.665|▲ |
|18:50:02.665|▲ |
|18:50:02.866|▲ info  - Linting and checking validity of types...|
|18:50:02.866|▲ |
|18:50:05.416|▲ |
|18:50:05.417|▲ ./pages/api/hello.js|
|18:50:05.417|▲ 6:1  Warning: Unexpected default export of anonymous function  import/no-anonymous-default-export|
|18:50:05.417|▲ |
|18:50:05.417|▲ ./pages/login.js|
|18:50:05.417|▲ 28:11  Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element|
|18:50:05.417|▲ |
|18:50:05.417|▲ ./pages/signup.js|
|18:50:05.418|▲ 8:11  Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element|
|18:50:05.418|▲ |
|18:50:05.418|▲ ./components/Header/index.js|
|18:50:05.418|▲ 33:19  Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element|
|18:50:05.418|▲ 38:19  Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element|
|18:50:05.420|▲ 116:23  Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element|
|18:50:05.420|▲ 205:19  Warning: Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element|
|18:50:05.420|▲ |
|18:50:05.421|▲ info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules|
|18:50:05.421|▲ |
|18:50:05.448|▲ info  - Creating an optimized production build...|
|18:50:05.448|▲ |
|18:50:05.484|▲ warn  - You are using an experimental edge runtime, the API might change.|
|18:50:05.484|▲ |
|18:50:05.516|▲ warn  - You are using the experimental Edge Runtime with `experimental.runtime`.|
|18:50:05.517|▲ |
|18:50:17.153|▲ info  - Compiled successfully|
|18:50:17.154|▲ |
|18:50:17.154|▲ info  - Collecting page data...|
|18:50:17.154|▲ |
|18:50:22.481|▲ info  - Generating static pages (0/2)|
|18:50:22.481|▲ |
|18:50:22.587|▲ info  - Generating static pages (2/2)|
|18:50:22.590|▲ |
|18:50:22.605|▲ info  - Finalizing page optimization...|
|18:50:22.606|▲ |
|18:50:22.610|▲ |
|18:50:22.610|▲ |
|18:50:22.642|▲ Route (pages)                              Size     First Load JS|
|18:50:22.643|▲ ┌ ℇ /                                      4.32 kB        77.4 kB|
|18:50:22.643|▲ ├   └ css/7c9e31c2156353a4.css             706 B|
|18:50:22.643|▲ ├   /_app                                  0 B            73.1 kB|
|18:50:22.643|▲ ├ ○ /404                                   181 B          73.3 kB|
|18:50:22.643|▲ ├ ℇ /api/hello                             0 B            73.1 kB|
|18:50:22.643|▲ ├ ℇ /layout                                12.8 kB        85.9 kB|
|18:50:22.644|▲ ├ ℇ /login                                 2.06 kB        75.2 kB|
|18:50:22.644|▲ └ ℇ /signup                                1.41 kB        74.5 kB|
|18:50:22.644|▲ + First Load JS shared by all              77.8 kB|
|18:50:22.644|▲   ├ chunks/framework-3b5a00d5d7e8d93b.js   45.4 kB|
|18:50:22.644|▲   ├ chunks/main-b482fffd82fa7e1c.js        26.7 kB|
|18:50:22.644|▲   ├ chunks/pages/_app-2398585b21d2d8c8.js  285 B|
|18:50:22.644|▲   ├ chunks/webpack-8fa1640cc84ba8fe.js     750 B|
|18:50:22.644|▲   └ css/98ed43b0b54a14b5.css               4.71 kB|
|18:50:22.644|▲ |
|18:50:22.645|▲ |
|18:50:22.645|▲ ℇ  (Streaming)  server-side renders with streaming (uses React 18 SSR streaming or Server Components)|
|18:50:22.645|▲ ○  (Static)     automatically rendered as static HTML (uses no initial props)|
|18:50:22.645|▲ |
|18:50:22.645|▲ |
|18:50:24.194|▲ Traced Next.js server files in: 1.376s|
|18:50:24.195|▲ |
|18:50:25.007|▲ Created all serverless functions in: 811.816ms|
|18:50:25.007|▲ |
|18:50:25.522|▲ Collected static files (public/, static/, .next/static): 7.993ms|
|18:50:25.523|▲ |
|18:50:25.606|▲ Build Completed in .vercel/output [25s]|
|18:50:25.607|▲ |
|18:50:25.759|⚡️|
|18:50:25.759|⚡️|
|18:50:25.759|⚡️ Completed 'npx vercel build'.|
|18:50:25.759|⚡️|
|18:50:27.038|⚡️ Generated '.vercel/output/static/_worker.js'.|
|18:50:27.088|Finished|
|18:50:27.089|Found _worker.js in output directory. Uploading.|
|18:50:27.122|Validating asset output directory|
|18:50:27.768|Deploying your site to Cloudflare's global network...|
|18:50:32.690| Uploading... (0/20)|
|18:50:32.691||
|18:50:33.846|AAG Uploading... (6/20)|
|18:50:33.846||
|18:50:34.060|AAG Uploading... (13/20)|
|18:50:34.060||
|18:50:34.212|AAG Uploading... (20/20)|
|18:50:34.212||
|18:50:34.215|✨ Success! Uploaded 20 files (1.95 sec)|
|18:50:34.215||
|18:50:34.509|✨ Upload complete!|
|18:50:35.955|Success: Assets published!|
|18:50:39.222|Success: Your site was deployed!|

But the website doesn’t seems to be working https://1fc41fd8.nextjs-webapp-cloudflare.pages.dev/

Setting up Next.js with Cloudflare isn’t as simple as with other providers like Vercel or Netlify that make it almost one-click I’m afraid. It’s going to take some configuration if you want to use their edge runtime as documented at Deploy a Next.js site · Cloudflare Pages docs and GitHub - cloudflare/next-on-pages, or you’ll have to tailor your pages and config to be designed to work effectively with a static export.

If this kind of technical debug and configuration isn’t something you want to do, then I’d stick with Netlify or Vercel.

1 Like

My deployment is also not working
https://b1767065.newnextjscloudflaredemo.pages.dev
the page shows at first and then immediately all the code disappears on its own.
the api seems ok https://b1767065.newnextjscloudflaredemo.pages.dev/api/hello

1 Like

I would recommend filing an issue on the GitHub repo with steps to reproduce:

Did you perhaps miss Step 8 in the documentation at GitHub - cloudflare/next-on-pages?

  1. In the Pages project Settings > Functions > Compatibility Flags, add the transformstream_enable_standard_constructor and streams_enable_constructors flags. These will not be necessary once they graduate to be on by default on 2022-11-30’s compatibility date.
1 Like

This post was flagged by the community and is temporarily hidden.