cloudflare / next-on-pages

CLI to build and develop Next.js apps for Cloudflare Pages
https://www.npmjs.com/package/@cloudflare/next-on-pages
MIT License
1.24k stars 119 forks source link

[🐛 Bug]: Error: Importing "@vercel/next": require() of ES Module #689

Open willin opened 6 months ago

willin commented 6 months ago

next-on-pages environment related information

System:
        Platform: darwin
        Arch: arm64
        Version: Darwin Kernel Version 23.4.0: Fri Jan 12 22:40:34 PST 2024; root:xnu-10063.100.610.0.2~19/RELEASE_ARM64_T6000
        CPU: (10) arm64 Apple M1 Max
        Memory: 32 GB
        Shell: /bin/zsh
Package Manager Used: npm (9.8.0)

Relevant Packages:
        @cloudflare/next-on-pages: 1.9.0
        vercel: 33.5.3
        next: 14.1.0

Description

success on local development but errored on cloudflare pages deployment.

Local Logs

NODE_ENV=production bun run pages:build
$ bunx @cloudflare/next-on-pages
⚡️ @cloudflare/next-on-pages CLI v.1.9.0
⚡️ Detected Package Manager: bun (1.0.29)
⚡️ Preparing project...
⚡️ Project is ready
⚡️ Building project...
▲  Vercel CLI 33.5.3
▲  Detected `bun.lockb` generated by Bun
▲  Warning: Bun is used as a package manager at build time only, not at runtime with Functions
▲  WARNING: You should not upload the `.next` directory.
▲  Installing dependencies...
▲  bun install v1.0.29 (a146856d)
▲  
▲  Checked 627 installs across 659 packages (no changes) [61.00ms]
▲  Detected Next.js version: 14.1.0
▲  Running "bun run build"
▲  $ next build
▲  Proxy environment variables detected. We'll use your proxy for fetch requests.
▲  ▲ Next.js 14.1.0
▲  
▲  Creating an optimized production build ...
▲  Proxy environment variables detected. We'll use your proxy for fetch requests.
▲  Proxy environment variables detected. We'll use your proxy for fetch requests.
▲  Proxy environment variables detected. We'll use your proxy for fetch requests.
▲  ✓ Compiled successfully
▲  Linting and checking validity of types ...
▲  Collecting page data ...
▲  ⚠ Using edge runtime on a page currently disables static generation for that page
▲  Generating static pages (0/4) ...
▲  Generating static pages (1/4)
▲  Generating static pages (2/4)
▲  Generating static pages (3/4)
▲  ✓ Generating static pages (4/4)
▲  Finalizing page optimization ...
▲  Collecting build traces ...
▲  
▲  Route (app)                              Size     First Load JS
▲  ┌ ○ /                                    5.13 kB        89.3 kB
▲  ├ ℇ /_not-found                          0 B                0 B
▲  ├ ℇ /api/cancel                          0 B                0 B
▲  ├ ℇ /api/create                          0 B                0 B
▲  ├ ℇ /api/success                         0 B                0 B
▲  └ ℇ /api/webhook                         0 B                0 B
▲  + First Load JS shared by all            84.2 kB
▲  ├ chunks/726-f264f99eb28773de.js       28.9 kB
▲  ├ chunks/fd9d1056-cc48c28d170fddc2.js  53.4 kB
▲  └ other shared chunks (total)          1.89 kB
▲  ○  (Static)        prerendered as static content
▲  ℇ  (Edge Runtime)  server-rendered on demand using the Edge Runtime
▲  Traced Next.js server files in: 276.493ms
▲  Created all serverless functions in: 480.304ms
▲  Collected static files (public/, static/, .next/static): 2.312ms
▲  Build Completed in .vercel/output [10s]
⚡️ Completed `bunx vercel build`.

⚡️ Build Summary (@cloudflare/next-on-pages v1.9.0)
⚡️ 
⚡️ Edge Function Routes (5)
⚡️   ┌ /_not-found
⚡️   ├ /api/cancel
⚡️   ├ /api/create
⚡️   ├ /api/success
⚡️   └ /api/webhook
⚡️ 
⚡️ Prerendered Routes (3)
⚡️   ┌ /
⚡️   ├ /favicon.ico
⚡️   └ /index.rsc
⚡️ 
⚡️ Other Static Assets (29)
⚡️   ┌ /_app.rsc.json
⚡️   ├ /_document.rsc.json
⚡️   ├ /_error.rsc.json
⚡️   ├ /500.html
⚡️   └ ... 25 more

⚡️ Build log saved to '.vercel/output/static/_worker.js/nop-build-log.json'
⚡️ Generated '.vercel/output/static/_worker.js/index.js'.
⚡️ Build completed in 0.36s

Remote Logs

2024-03-04T14:41:22.743542Z Cloning repository...
2024-03-04T14:41:23.552961Z From https://github.com/willin/nextjs-stripe-cloudflare
2024-03-04T14:41:23.553505Z  * branch            cfd993b55d687d68b438de8c33f5b77c0c85ca33 -> FETCH_HEAD
2024-03-04T14:41:23.553654Z 
2024-03-04T14:41:23.590387Z HEAD is now at cfd993b feat: :sparkles: Alipay
2024-03-04T14:41:23.590864Z 
2024-03-04T14:41:23.68788Z  
2024-03-04T14:41:23.688667Z Using v2 root directory strategy
2024-03-04T14:41:23.717563Z Success: Finished cloning repository files
2024-03-04T14:41:25.509946Z Detected the following tools from environment: bun@latest, nodejs@18.17.1
2024-03-04T14:41:25.510629Z Installing bun latest
2024-03-04T14:41:25.936634Z Downloading Bun v1.0.30...
2024-03-04T14:41:27.03592Z  Archive:  /tmp/asdf-bun.UqBE/bun.zip
2024-03-04T14:41:27.827729Z   inflating: /opt/buildhome/.asdf/downloads/bun/1.0.30/bun  
2024-03-04T14:41:27.894885Z Installing Bun v1.0.30...
2024-03-04T14:41:28.006721Z Bun v1.0.30 is installed successfully!
2024-03-04T14:41:28.656918Z Installing project dependencies: bun install --frozen-lockfile
2024-03-04T14:41:28.913411Z bun install v1.0.30 (1424a196)
2024-03-04T14:41:35.911347Z 
2024-03-04T14:41:35.912083Z  + @cloudflare/next-on-pages@1.9.0
2024-03-04T14:41:35.912327Z  + @cloudflare/workers-types@4.20240222.0
2024-03-04T14:41:35.912476Z  + @types/node@20.11.24
2024-03-04T14:41:35.912616Z  + @types/react@18.2.61
2024-03-04T14:41:35.912756Z  + @types/react-dom@18.2.19
2024-03-04T14:41:35.912874Z  + autoprefixer@10.4.18
2024-03-04T14:41:35.913023Z  + eslint@8.57.0
2024-03-04T14:41:35.913151Z  + eslint-config-next@14.1.0
2024-03-04T14:41:35.913396Z  + eslint-plugin-next-on-pages@1.9.0
2024-03-04T14:41:35.91365Z   + postcss@8.4.35
2024-03-04T14:41:35.913805Z  + tailwindcss@3.4.1
2024-03-04T14:41:35.913944Z  + typescript@5.3.3
2024-03-04T14:41:35.91408Z   + vercel@33.5.3
2024-03-04T14:41:35.914224Z  + wrangler@3.30.1
2024-03-04T14:41:35.91436Z   + next@14.1.0
2024-03-04T14:41:35.914524Z  + react@18.2.0
2024-03-04T14:41:35.914687Z  + react-dom@18.2.0
2024-03-04T14:41:35.914837Z  + stripe@14.19.0
2024-03-04T14:41:35.914974Z 
2024-03-04T14:41:35.915099Z warn: esbuild's postinstall script took 1.4s
2024-03-04T14:41:35.915232Z 
2024-03-04T14:41:35.915398Z  584 packages installed [7.01s]
2024-03-04T14:41:35.936531Z Executing user command: bun run pages:build
2024-03-04T14:41:36.220517Z $ bunx @cloudflare/next-on-pages
2024-03-04T14:41:36.638867Z ⚡️ @cloudflare/next-on-pages CLI v.1.9.0
2024-03-04T14:41:36.663998Z ⚡️ Detected Package Manager: bun (1.0.30)
2024-03-04T14:41:36.664259Z ⚡️ Preparing project...
2024-03-04T14:41:36.694795Z ⚡️ Project is ready
2024-03-04T14:41:36.695209Z ⚡️ Building project...
2024-03-04T14:41:37.201062Z ▲  Vercel CLI 33.5.3
2024-03-04T14:41:37.466752Z ▲  Error: Importing "@vercel/next": require() of ES Module /opt/buildhome/repo/node_modules/string-width/index.js from /opt/buildhome/repo/node_modules/wide-align/align.js not supported.
2024-03-04T14:41:37.467114Z ▲  Instead change the require of index.js in /opt/buildhome/repo/node_modules/wide-align/align.js to a dynamic import() which is available in all CommonJS modules.
2024-03-04T14:41:37.539359Z 
2024-03-04T14:41:37.539619Z ⚡️ The Vercel build (`bunx vercel build`) command failed. For more details see the Vercel logs above.
2024-03-04T14:41:37.539869Z ⚡️ If you need help solving the issue, refer to the Vercel or Next.js documentation or their repositories.
2024-03-04T14:41:37.54014Z  
2024-03-04T14:41:37.548493Z error: script "pages:build" exited with code 1
2024-03-04T14:41:37.550412Z Failed: Error while executing user command. Exited with error code: 1
2024-03-04T14:41:37.559764Z Failed: build command exited with code: 1
2024-03-04T14:41:39.164273Z Failed: error occurred while running build command

Reproduction

https://github.com/willin/nextjs-stripe-cloudflare

Pages Deployment Method

Pages CI (GitHub/GitLab integration)

Pages Deployment ID

1a220fe3-8824-43cb-8da1-235a74b16e01

Additional Information

Just a new project with a stripe packge.

Would you like to help?

danieluhm2004 commented 6 months ago

Hi, Can you try to add this thing to package.json?

{
  "name": "@package/name", 
  "resolutions": { "string-width": "4.2.3" }
  ...
}
chunlea commented 6 months ago

Add "resolutions": { "string-width": "4.2.3" } into package.json works for me, but I had to delete node_module and bun.lockb file, then run bun install again. No need to add string-width in depencencies.

Jarred-Sumner commented 6 months ago

I think this is a bug in Bun. Can you open an issue in Bun's github repo?

chunlea commented 6 months ago

There is already a bug report in bun: https://github.com/oven-sh/bun/issues/7539

n3oney commented 5 months ago

The issue has been fixed in bun v1.1.4, looks like this can be closed.

LABCAT commented 5 months ago

I'm also experiencing this error using yarn, adding "resolutions": { "string-width": "4.2.3" } hasn't resolved the issue for me.

LABCAT commented 5 months ago

Upgrading the vercel dev dependency to 34 solved the issue for me.

SopraTests commented 5 months ago

I'm still having issues using Bun 1.1.4 trying to build an Angular 17 application with Karma for testing. The first issue was with string-width requiring strip-ansi which was resolved by using "overrides": { "string-width": "6.1.0" } but then I get the next error which I can't provide an override for as it's on latest already

>bun run build
$ ng build core
Unknown error: Error [ERR_REQUIRE_ESM]: require() of ES Module C:\dev\project\node_modules\string-width\index.js from C:\dev\project\node_modules\cliui\build\index.cjs not supported.
Instead change the require of index.js in C:\dev\project\node_modules\cliui\build\index.cjs to a dynamic import() which is available in all CommonJS modules.
error: script "build" exited with code 127
chunlea commented 3 months ago

Just noticed this from the log, I believed cloudflare need to bump their bun version in deployment runtime to fix it. The current bun version still 1.0.1.


01:58:16.359 | Found wrangler.toml file. Reading build configuration...
-- | --
01:58:16.364 | pages_build_output_dir: .vercel/output/static
01:58:16.365 | Build environment variables: (none found)
01:58:16.468 | Successfully read wrangler.toml file.
01:58:16.614 | Detected the following tools from environment: bun@1.0.1, nodejs@18.17.1
01:58:16.615 | Installing project dependencies: bun install --frozen-lockfile
01:58:16.844 | bun install v1.0.1 (31aec4eb)
01:58:21.667 | + @cloudflare/next-on-pages@1.11.3

Also followed https://developers.cloudflare.com/pages/configuration/language-support-and-tools/#v2-build-system ,fixed it by manually set up BUN_VERSION to latest version(1.1.9) and redeploy.

harveenatwal commented 3 months ago

If you're using npm, adding this to my package.json fixed it for me:

"overrides": { "string-width": "4.2.3" },

MarineLHexIT commented 1 month ago

I have the same issue, in local environment. I’m using yarn. I had "vercel": "^35.2.1", I tried to upgrade to 35.2.3, but what fixed it was to downgrade towards `"vercel": "^34".