[🐛 Bug]: SyntaxError while building an app with `@clerk/nextjs` npm package

[bharatari]

next-on-pages environment related information

System:
Platform: linux
Arch: x64
Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1255U
Memory: 8 GB
Shell: /bin/bash
Binaries:
Node: 18.15.0
Yarn: 1.22.19
npm: 9.5.0
pnpm: 8.3.1
Package Manager Used: npm
Relevant Packages:
@cloudflare/next-on-pages: 0.0.0-97c8739 (beta/canary release)
vercel: N/A
next: 13.4.3

Description

Building a Next.js app with the @clerk/nextjs npm package causes a SyntaxError during the build process:

⚡️ @cloudflare/next-on-pages CLI v.0.0.0-97c8739 (beta/canary release)
⚡️ Detected Package Manager: npm
⚡️ Preparing project...
⚡️ Project is ready
⚡️ Building project...
▲  Next-On-Pages-Vercel-CLI CLI 29.3.0-next-on-pages-fix-3
▲  WARNING: You should not upload the `.next` directory.
▲  Installing dependencies...
▲  up to date in 476ms
▲  138 packages are looking for funding
▲  run `npm fund` for details
▲  Detected Next.js version: 13.4.3
▲  Detected `package-lock.json` generated by npm 7+...
▲  Running "npm run build"
▲  > build-error-repro@0.1.0 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/3)
▲  - info Generating static pages (3/3)
▲  - info Finalizing page optimization...
▲  
▲  Route (app)                                Size     First Load JS
▲  ┌ ℇ /                                      4.77 kB        81.8 kB
▲  └ ○ /favicon.ico                           0 B                0 B
▲  + First Load JS shared by all              77.1 kB
▲  ├ chunks/139-601a8d7b508ad4e1.js         24.7 kB
▲  ├ chunks/2443530c-d4a6bd7fc7f21e3c.js    50.5 kB
▲  ├ chunks/main-app-4bcdaf5f1af99d9b.js    215 B
▲  └ chunks/webpack-13cb6a530b2d87f9.js     1.64 kB
▲  
▲  Route (pages)                              Size     First Load JS
▲  ─ ○ /404                                   178 B          83.9 kB
▲  + First Load JS shared by all              83.7 kB
▲  ├ chunks/main-b6a5a6d43628902d.js        81.9 kB
▲  ├ chunks/pages/_app-c544d6df833bfd4a.js  192 B
▲  └ chunks/webpack-13cb6a530b2d87f9.js     1.64 kB
▲  
▲  ƒ Middleware                               346 kB
▲  ℇ  (Streaming)  server-side renders with streaming (uses React 18 SSR streaming or Server Components)
▲  ○  (Static)     automatically rendered as static HTML (uses no initial props)
▲  Traced Next.js server files in: 4.164s
▲  Created all serverless functions in: 1.558s
▲  Collected static files (public/, static/, .next/static): 8.917ms
▲  Using TypeScript 5.0.4 (local user-provided)
▲  Build Completed in .vercel/output [33s]
⚡️ Completed `npx vercel build`.
/home/bbari/.npm/_npx/be5105308c27b00d/node_modules/@cloudflare/next-on-pages/dist/index.js:10511
  var err = new SyntaxError(message);
            ^

SyntaxError: Unexpected token (3:10)
    at pp$4.raise (/home/bbari/.npm/_npx/be5105308c27b00d/node_modules/@cloudflare/next-on-pages/dist/index.js:10511:13)
    at pp$9.unexpected (/home/bbari/.npm/_npx/be5105308c27b00d/node_modules/@cloudflare/next-on-pages/dist/index.js:8105:8)
    at pp$9.semicolon (/home/bbari/.npm/_npx/be5105308c27b00d/node_modules/@cloudflare/next-on-pages/dist/index.js:8087:10)
    at pp$8.parseExpressionStatement (/home/bbari/.npm/_npx/be5105308c27b00d/node_modules/@cloudflare/next-on-pages/dist/index.js:8568:8)
    at pp$8.parseStatement (/home/bbari/.npm/_npx/be5105308c27b00d/node_modules/@cloudflare/next-on-pages/dist/index.js:8297:21)
    at pp$8.parseTopLevel (/home/bbari/.npm/_npx/be5105308c27b00d/node_modules/@cloudflare/next-on-pages/dist/index.js:8159:21)
    at Parser2.parse (/home/bbari/.npm/_npx/be5105308c27b00d/node_modules/@cloudflare/next-on-pages/dist/index.js:7958:15)
    at Function.parse2 [as parse] (/home/bbari/.npm/_npx/be5105308c27b00d/node_modules/@cloudflare/next-on-pages/dist/index.js:8013:35)
    at parse3 (/home/bbari/.npm/_npx/be5105308c27b00d/node_modules/@cloudflare/next-on-pages/dist/index.js:12320:17)
    at extractWebpackChunks (/home/bbari/.npm/_npx/be5105308c27b00d/node_modules/@cloudflare/next-on-pages/dist/index.js:12638:26) {
  pos: 133,
  loc: Position2 { line: 3, column: 10 },
  raisedAt: 178
}

Node.js v18.15.0

This app runs properly locally with next dev and builds properly with next build, which suggests it's not an issue with @clerk/nextjs itself (I apologize in advance if this is not an issue on the next-on-pages end).

This example fails on the stable version of next-on-pages with a wasm import error, which is why I'm running against the beta version. Wanted to mention that in case this has something to do with wasm support.

Reproduction

Here is a repo that demonstrates the issue: https://github.com/bharatari/build-error-repro. I generated the app via create-next-app, added export const runtime = "edge"; to app/page.tsx and then simply added a middleware.ts file that imports the @clerk/nextjs package.

Pages Deployment Method

None

Pages Deployment ID

No response

Additional Information

No response

Would you like to help?

• Would you like to help fixing this bug?

[dario-piotrowicz]

Hi @bharatari thank you very much for the issue 🙂

(and for the reproduction! it's always extremely helpful having one! 🙏)

The syntax error you're experiencing is a silly bug present in the beta package that I recently introduced, sorry for the inconvenience 😓, #272 fixes that

You can try the prerelease package to see if things work fine for you with that

anyways I did run your app locally, now the build succeeds but it wrangler pages dev produces an internal server error, with the following shown in the terminal:

but I guess that could be expected because I haven't set a Clerk key? (sorry I am not familiar with Clerk 😓)

Please give the prerelease a try and let me know if everything there works as you'd expect it to 🙏

[bharatari]

Hi @dario-piotrowicz, thank you so much for the quick fix! Just tried it out locally and the build succeeds with the prerelease.

The error you're seeing locally is expected because you don't have a Clerk key but I seem to be seeing a different error on my end when running locally with npx wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat (with or without the Clerk key set):

[mf:wrn] Parsed 1 valid header rule.
[mf:wrn] Service bindings are experimental. There may be breaking changes in the future.
[mf:inf] Worker reloaded! (31.70KiB)
[mf:inf] Listening on 0.0.0.0:8788
[mf:inf] - http://127.0.0.1:8788
[mf:inf] - http://172.23.149.182:8788
[mf:inf] Updated `Request.cf` object cache!
Error: ENOENT: no such file or directory, open '/tmp/tmp-899-Tbp5WDFgD7q3/__next-on-pages-dist__/functions/middleware.func.js'
    at Object.openSync (node:fs:601:3)
    at readFileSync (node:fs:469:35)
    at ModuleLinker.linker (/home/bbari/.npm/_npx/32026684e21afda6/node_modules/@miniflare/runner-vm/src/linker.ts:108:18)
    at importModuleDynamically (/home/bbari/.npm/_npx/32026684e21afda6/node_modules/@miniflare/runner-vm/src/linker.ts:173:25)
    at importModuleDynamicallyWrapper (node:internal/vm/module:429:21)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
    at m (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:18653)
    at w.runRouteMiddleware (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:20527)
    at w.checkRoute (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:22317)
    at w.checkPhase (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:23001) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/tmp/tmp-899-Tbp5WDFgD7q3/__next-on-pages-dist__/functions/middleware.func.js'
}
GET / 500 Internal Server Error (94.88ms)
GET /_next/static/chunks/webpack-13cb6a530b2d87f9.js 200 OK (38.54ms)
GET /_next/static/rSAp3BtX8gonb8-DXp5OV/_buildManifest.js 200 OK (33.15ms)
GET /_next/static/rSAp3BtX8gonb8-DXp5OV/_ssgManifest.js 200 OK (4.49ms)
Error: ENOENT: no such file or directory, open '/tmp/tmp-899-Tbp5WDFgD7q3/__next-on-pages-dist__/functions/middleware.func.js'
    at Object.openSync (node:fs:601:3)
    at readFileSync (node:fs:469:35)
    at ModuleLinker.linker (/home/bbari/.npm/_npx/32026684e21afda6/node_modules/@miniflare/runner-vm/src/linker.ts:108:18)
    at importModuleDynamically (/home/bbari/.npm/_npx/32026684e21afda6/node_modules/@miniflare/runner-vm/src/linker.ts:173:25)
    at importModuleDynamicallyWrapper (node:internal/vm/module:429:21)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
    at m (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:18653)
    at w.runRouteMiddleware (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:20527)
    at w.checkRoute (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:22317)
    at w.checkPhase (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:23001) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/tmp/tmp-899-Tbp5WDFgD7q3/__next-on-pages-dist__/functions/middleware.func.js'
}
HEAD /_next/data/rSAp3BtX8gonb8-DXp5OV/index.json 500 Internal Server Error (50.66ms)
Error: ENOENT: no such file or directory, open '/tmp/tmp-899-Tbp5WDFgD7q3/__next-on-pages-dist__/functions/middleware.func.js'
    at Object.openSync (node:fs:601:3)
    at readFileSync (node:fs:469:35)
    at ModuleLinker.linker (/home/bbari/.npm/_npx/32026684e21afda6/node_modules/@miniflare/runner-vm/src/linker.ts:108:18)
    at importModuleDynamically (/home/bbari/.npm/_npx/32026684e21afda6/node_modules/@miniflare/runner-vm/src/linker.ts:173:25)
    at importModuleDynamicallyWrapper (node:internal/vm/module:429:21)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
    at m (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:18653)
    at w.runRouteMiddleware (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:20527)
    at w.checkRoute (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:22317)
    at w.checkPhase (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:23001) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/tmp/tmp-899-Tbp5WDFgD7q3/__next-on-pages-dist__/functions/middleware.func.js'
}
HEAD /_next/data/rSAp3BtX8gonb8-DXp5OV/index.json 500 Internal Server Error (34.02ms)
GET /favicon.ico 304 Not Modified (12.01ms)
Error: ENOENT: no such file or directory, open '/tmp/tmp-899-Tbp5WDFgD7q3/__next-on-pages-dist__/functions/middleware.func.js'
    at Object.openSync (node:fs:601:3)
    at readFileSync (node:fs:469:35)
    at ModuleLinker.linker (/home/bbari/.npm/_npx/32026684e21afda6/node_modules/@miniflare/runner-vm/src/linker.ts:108:18)
    at importModuleDynamically (/home/bbari/.npm/_npx/32026684e21afda6/node_modules/@miniflare/runner-vm/src/linker.ts:173:25)
    at importModuleDynamicallyWrapper (node:internal/vm/module:429:21)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
    at m (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:18653)
    at w.runRouteMiddleware (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:20527)
    at w.checkRoute (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:22317)
    at w.checkPhase (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:23001) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/tmp/tmp-899-Tbp5WDFgD7q3/__next-on-pages-dist__/functions/middleware.func.js'
}
HEAD /_next/data/rSAp3BtX8gonb8-DXp5OV/index.json 500 Internal Server Error (30.71ms)

[bharatari]

Not seeing this issue when I deploy, so this might just be an issue with my local environment, especially given it worked for you locally as well.

[james-elicx]

The error you're seeing locally is expected because you don't have a Clerk key but I seem to be seeing a different error on my end when running locally with npx wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat (with or without the Clerk key set):

[mf:wrn] Parsed 1 valid header rule.
[mf:wrn] Service bindings are experimental. There may be breaking changes in the future.
[mf:inf] Worker reloaded! (31.70KiB)
[mf:inf] Listening on 0.0.0.0:8788
[mf:inf] - http://127.0.0.1:8788
[mf:inf] - http://172.23.149.182:8788
[mf:inf] Updated `Request.cf` object cache!
Error: ENOENT: no such file or directory, open '/tmp/tmp-899-Tbp5WDFgD7q3/__next-on-pages-dist__/functions/middleware.func.js'
    at Object.openSync (node:fs:601:3)
    at readFileSync (node:fs:469:35)
    at ModuleLinker.linker (/home/bbari/.npm/_npx/32026684e21afda6/node_modules/@miniflare/runner-vm/src/linker.ts:108:18)
    at importModuleDynamically (/home/bbari/.npm/_npx/32026684e21afda6/node_modules/@miniflare/runner-vm/src/linker.ts:173:25)
    at importModuleDynamicallyWrapper (node:internal/vm/module:429:21)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
    at m (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:18653)
    at w.runRouteMiddleware (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:20527)
    at w.checkRoute (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:22317)
    at w.checkPhase (/home/bbari/build-error-repro/.vercel/output/static/_worker.js/index.js:19:23001) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/tmp/tmp-899-Tbp5WDFgD7q3/__next-on-pages-dist__/functions/middleware.func.js'
}

Hey there, are you using wrangler@2 locally, by any chance? If so, that could explain the issue - please just double-check for me that you are using wrangler@3 🙂

If that doesn't seem to be the problem, please could you also check that you're providing the necessary env variables to wrangler too - someone else experienced a similar issue when they weren't.

[bharatari]

Ah that was it, I was on wrangler@2. This is working for me locally with wrangler@3. Thank you for heads up!

[dario-piotrowicz]

Awesome 😄

Glad that all is working as expected now @bharatari 😃

I'm closing this issue as it should hopefully be all ok now, if you still have problems feel free to reopen it or open a new one 🙂