[🐛 Bug]: @cloudflare/next-on-pages --watch keeps rebuilding with yarn

kev-ac commented 1 year ago

next-on-pages environment related information

System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:52:24 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64T6000 CPU: (10) arm64 Apple M1 Pro Memory: 32 GB Shell: /opt/homebrew/bin/fish Binaries: Node: 16.20.0 Yarn: 1.22.19 npm: 8.19.4 pnpm: 8.1.1 Package Manager Used: yarn (classic) Relevant Packages: @cloudflare/next-on-pages: 1.0.2 vercel: [object Promise] next: [object Promise] (13.4.2)_

Description

Using watch mode on a clean install of Next.js 13.4.2 (Created with yarn create next-app PROJECT_NAME results in an infinite loop.

Reproduction

Create a Next.js app with yarn create next-app PROJECT_NAME.

Answers to questions:

✔ Would you like to use TypeScript with this project? … Yes
✔ Would you like to use ESLint with this project? …  Yes
✔ Would you like to use Tailwind CSS with this project? …  Yes
✔ Would you like to use `src/` directory with this project? … Yes
✔ Use App Router (recommended)? … Yes
? Would you like to customize the default import alias? › No

Pages Deployment Method

None

Pages Deployment ID

No response

Additional Information

Log:

user@hostname ~/P/j/app (main)> npx @cloudflare/next-on-pages --watch
⚡️ @cloudflare/next-on-pages CLI v.1.0.2
⚡️ Detected Package Manager: yarn (classic)
⚡️ Preparing project...
⚡️ Project is ready
⚡️ Installing vercel as dev dependencies with 'yarn add vercel -D'...
▲  yarn add v1.22.19
▲  [1/4] Resolving packages...
▲  [2/4] Fetching packages...
▲  [3/4] Linking dependencies...
▲  [4/4] Building fresh packages...
▲  success Saved 1 new dependency.
▲  info Direct dependencies
▲  └─ next-on-pages-vercel-cli@29.3.0-next-on-pages-fix-3
▲  info All dependencies
▲  └─ next-on-pages-vercel-cli@29.3.0-next-on-pages-fix-3
▲  Done in 3.15s.
⚡️ Install completed
⚡️ Building project...
▲  yarn run v1.22.19
▲  $ /{path}/node_modules/.bin/next-on-pages-vercel-cli build
▲  Next-On-Pages-Vercel-CLI CLI 29.3.0-next-on-pages-fix-3
▲  WARNING: You should not upload the `.next` directory.
▲  Installing dependencies...
▲  [1/4] Resolving packages...
▲  success Already up-to-date.
▲  Detected Next.js version: 13.4.2
▲  Running "yarn run build"
▲  $ next build
▲  - info Creating an optimized production build...
▲  - info Compiled successfully
▲  - info Linting and checking validity of types...
▲  - info Collecting page data...
▲  - info Generating static pages (0/4)
▲  - info Generating static pages (1/4)
▲  - info Generating static pages (2/4)
▲  - info Generating static pages (3/4)
▲  - info Generating static pages (4/4)
▲  - info Finalizing page optimization...
▲  
▲  Route (app)                                Size     First Load JS
▲  ┌ ○ /                                      4.76 kB        81.7 kB
▲  └ ○ /favicon.ico                           0 B                0 B
▲  + First Load JS shared by all              76.9 kB
▲  ├ chunks/139-bbae89bf9cd2e4a9.js         24.5 kB
▲  ├ chunks/2443530c-d4a6bd7fc7f21e3c.js    50.5 kB
▲  ├ chunks/main-app-be5be06b8c2db0d7.js    214 B
▲  └ chunks/webpack-1102598922600a22.js     1.64 kB
▲  
▲  Route (pages)                              Size     First Load JS
▲  ─ ○ /404                                   178 B          85.9 kB
▲  + First Load JS shared by all              85.8 kB
▲  ├ chunks/main-ec7b1d67e0a9d0ca.js        83.9 kB
▲  ├ chunks/pages/_app-c544d6df833bfd4a.js  192 B
▲  └ chunks/webpack-1102598922600a22.js     1.64 kB
▲  ○  (Static)  automatically rendered as static HTML (uses no initial props)
▲  Traced Next.js server files in: 2.176s
▲  Created all serverless functions in: 1.227s
▲  Collected static files (public/, static/, .next/static): 3.18ms
▲  Build Completed in .vercel/output [10s]
▲  Done in 10.91s.
⚡️ Completed `yarn vercel build`.
⚡️ No functions detected.
⚡️ Generated '.vercel/output/static/_worker.js/index.js'.
⚡️ Running in '--watch' mode. Awaiting changes... (Ctrl+C to exit.)"
⚡️ Detected Package Manager: yarn (classic)
⚡️ Preparing project...
⚡️ Project is ready
⚡️ Installing vercel as dev dependencies with 'yarn add vercel -D'...
▲  yarn add v1.22.19
▲  [1/4] Resolving packages...
▲  [2/4] Fetching packages...
▲  [3/4] Linking dependencies...

Would you like to help?

[x] Would you like to help fixing this bug?

dario-piotrowicz commented 1 year ago

Hi @kev-ac, thanks a lot for the issue 🙂

Since you ticked the would-you-like-to-help checkbox I assume you'd be willing to try to fix it? 🙂

I can't guarantee it but I think that it's very very likely that the issue is simply that we watch some files in the app's directory that we need to ignore for the watch mode.

I had this issue with pnpm a while back and fixed it by adding some files to the watch mode ignore list (https://github.com/cloudflare/next-on-pages/pull/226). I suspect that your case is the same but there are yarn specific files that need to be added to the ignore list.

In case you need some guidance

Basically what I'd suggest you to do (assuming that you'd like to take this on that is 🙂) is: prerequisites if you haven't done them already: - fork the repository - clone the repo locally - build the next-on-pages cli by running the `build` script (note that there is also a `build:watch` script) - link your next-on-pages cli to your application (you can do it via `npm link`, by setting the devDependency to next-on-pages in your application's package.json to a relative path pointing to the next-on-pages directory, or however you prefer) then: - add a console log or breakpoint or whatever you usually use for debugging to check the arguments passed to the `fn` function here: https://github.com/cloudflare/next-on-pages/blob/016b8d3eb3d0622f946527dcbd1c2cfc10924bc7/src/index.ts#L83 the `watch` function comes from this library: https://github.com/paulmillr/chokidar and it includes some details on what files triggered the watch to re-run the function - run the command that produced the infinite loop and see what files are triggering the watch infinite re-runs - add those files here: https://github.com/cloudflare/next-on-pages/blob/016b8d3eb3d0622f946527dcbd1c2cfc10924bc7/src/index.ts#L70

kev-ac commented 1 year ago

Thanks for the guidance. Will have a look at it once I get to it in the next days.

kev-ac commented 1 year ago

After investigation I've found that the package.json is the culprit. When using yarn (classic) as the package manager vercel is added as a dev dependency, resulting in a change in the package.json and therefore loop in the process.

https://github.com/cloudflare/next-on-pages/blob/e48c4a09740db474ede116e99cd41e11bc539bd3/src/buildApplication/buildVercelOutput.ts#L50-L81

See PR #314.

dario-piotrowicz commented 1 year ago

Awesome, yeah that makes total sense :sweat_smile:

thanks a lot @kev-ac :smiley:

cloudflare / next-on-pages