[🐛 Bug]: templates/_worker.js causing build failure

[jambronner]

next-on-pages environment related information

System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:10:42 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6000
CPU: (8) arm64 Apple M1 Pro
Memory: 16 GB
Shell: /bin/bash
Package Manager Used: npm (10.8.2)

Relevant Packages:
@cloudflare/next-on-pages: 1.13.1
vercel: N/A
next: 14.2.5

Description

When attempting to build a Next.js project using @cloudflare/next-on-pages, the build process fails due to unresolved dependencies within the package itself. The error suggests a conflict between npm and Yarn PnP, even though the project is using npm. This failure occurs after npx vercel build completes, see below:

⚡️ Completed npx vercel build.
✘ [ERROR] Could not resolve "pcre-to-regexp"

node_modules/@cloudflare/next-on-pages/templates/_worker.js/utils/pcre.ts:5:23:
  5 │ import createPCRE from 'pcre-to-regexp';
    ╵                        ~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "pcre-to-regexp" here because it's not listed as a
dependency of this package:

../../.pnp.cjs:36:31:
  36 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "pcre-to-regexp" as external to exclude it from the bundle, which will
remove this error.

✘ [ERROR] Could not resolve "cookie"

node_modules/@cloudflare/next-on-pages/templates/_worker.js/routes-matcher.ts:1:26:
  1 │ const { parse } = require('cookie');
    ╵                           ~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "cookie" here because it's not listed as a
dependency of this package:

../../.pnp.cjs:36:31:
  36 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "cookie" as external to exclude it from the bundle, which will remove this
error. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

⚡️ Unexpected error: Build failed with 2 errors:
⚡️ node_modules/@cloudflare/next-on-pages/templates/_worker.js/routes-matcher.ts:1:26: ERROR: Could not resolve "cookie"
⚡️ node_modules/@cloudflare/next-on-pages/templates/_worker.js/utils/pcre.ts:5:23: ERROR: Could not resolve "pcre-to-regexp"

Reproduction

1.Set up a Next.js project using npm
2. Install @cloudflare/next-on-pages as a dev dependency
3. Run npx @cloudflare/next-on-pages

The build fails with errors indicating that "pcre-to-regexp" and "cookie" cannot be resolved, despite these being listed as dependencies in the @cloudflare/next-on-pages package.json.

Pages Deployment Method

None

Pages Deployment ID

No response

Additional Information

Additional Context:

1. The error mentions a Yarn PnP manifest (../../.pnp.cjs), even though the project is using npm.
2. Both "pcre-to-regexp" and "cookie" are listed as dependencies in the @cloudflare/next-on-pages package.json file.
3. The build process completes successfully up to the Vercel build step, but fails during the Cloudflare-specific build step.

Attempted Solutions:

1. Cleared npm cache and reinstalled dependencies
2. Updated @cloudflare/next-on-pages to the latest version
3. Checked for any Yarn-related files in the project directory and removed them
4. Verified that the project is using npm exclusively and not Yarn

Possible Causes:

1. There might be a conflict in how @cloudflare/next-on-pages is resolving its dependencies.
2. The package might be incorrectly assuming the use of Yarn PnP in npm projects.
3. There could be a bug in how the package is bundled or how it's resolving its own dependencies.

Request:

Please investigate why the @cloudflare/next-on-pages package is encountering these dependency resolution issues, particularly the apparent conflict with Yarn PnP in an npm project. Any guidance on how to resolve this issue or a fix for the package would be greatly appreciated.

Would you like to help?

• Would you like to help fixing this bug?

[beyourahi]

I'm having the exact same issue, it's really annoying

[eldss]

Same issue for me. I get this from a new project with no change after running the startup script pnpm create cloudflare@latest my-next-app --framework=next (same with the npm version). Once up, run pnpm run pages:build and you get this error. However, it does not cause issues when building in the Cloudflare Pages UI. I was able to connect my github account and upload the project successfully when done directly there. This is a silver lining, but I still want to be able to preview my changes locally with the cloudflare build before pushing anything.

[lego37yoon]

Similar issue for me. It looks like they have some conflicts between Vercel CLI's Yarn and my project package manager, only in the local environment.

I recently added @cloudflare/next-on-pages in my Next.js project using yarn add -D @cloudflare/next-on-pages, and set up scripts as a document did.

My deployment in CloudFlare Pages UI(web service) works well even they warns that using npx commands while project was setup with Yarn 4.5.0, but it successfully deployed and works well in production.

However, when I use yarn run pages:build which means npx @cloudflare/next-on-pages,

1. It detects my package manager well(Yarn 4.5.0).
2. Runs Vercel CLI with Yarn
3. Warns You should not upload '.next' directory
4. Installing dependencies: but it warns esbuild and workerd must be built, what my package.json does not have and did not warned before.
5. Detecting Next.js version fails, exited.
6. node_modules directory created with tons of packages, yarn requires yarn install

System:
Platform: linux (KDE Neon 6.1, Ubuntu 22.04.3 LTS)
Arch: x86_64
Version: 6.8.0-40-generic
CPU: (8) Intel Core i5-1035G7 CPU @ 1.20GHz
Memory: 16 GB
Shell: /bin/bash
Package Manager Used: Yarn (4.5.0)

Relevant Packages:
@cloudflare/next-on-pages: 1.13.5
vercel: 37.6.3
next: 14.2.14

and node version is 20.17.0.