[๐ Bug]: Error `Illegal invocation: function called with incorrect `this` reference` when using codehike#919
Open
### next-on-pages environment related information ``` System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 24.2.0: Fri Nov 15 19:28:48 PST 2024; root:xnu-11215.61.3~1/RELEASE_ARM64_T6000 CPU: (10) arm64 Apple M1 Max Memory: 32 GB Shell: /bin/zsh Package Manager Used: pnpm (9.11.0) Relevant Packages: @cloudflare/next-on-pages: 0.0.0-e9c9571 (prerelease for PR #918) vercel: 39.1.3 next: 15.0.4 ``` ### Description Following #912, the root cause for me is I am using the [codehike](https://github.com/code-hike/codehike) package to display code blocks @dario-piotrowicz. The error happens whenever I import components from codehike, e.g. `import { Pre } from "codehike/code"` even without actually using them. I took a quick look at the codehike repo and did not found any suspicious side effects it need to perform. Since codehike works with `next build` I assume it's `next-on-pages` specific. When running `pnpm preview`, the illegal invocation error is as follows ``` โฏ pnpm preview > [email protected] preview /Users/qiushi/workspace/my-website/next-illegal-invocation > npm run pages:build && wrangler pages dev > [email protected] pages:build > npx @cloudflare/next-on-pages โก๏ธ @cloudflare/next-on-pages CLI v.0.0.0-e9c9571 (prerelease for PR #918) โก๏ธ Detected Package Manager: pnpm (9.11.0) โก๏ธ Preparing project... โก๏ธ Project is ready โก๏ธ Building project... โฒ Vercel CLI 39.1.3 โฒ Detected `pnpm-lock.yaml` version 9 generated by [email protected] โฒ WARNING: You should not upload the `.next` directory. โฒ Installing dependencies... โฒ Lockfile is up to date, resolution step is skipped โฒ Already up to date โฒ โฒ Done in 1.5s โฒ Detected Next.js version: 15.0.4 โฒ Running "pnpm run build" โฒ > [email protected] build /Users/qiushi/workspace/my-website/next-illegal-invocation โฒ > next build โฒ Attention: Next.js now collects completely anonymous telemetry regarding usage. โฒ This information is used to shape Next.js' roadmap and prioritize features. โฒ 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: โฒ https://nextjs.org/telemetry โฒ โฒ Next.js 15.0.4 โฒ โฒ Creating an optimized production build ... โฒ โ Compiled successfully โฒ Linting and checking validity of types ... โฒ โจฏ ESLint must be installed in order to run during builds: pnpm install --save-dev eslint โฒ Collecting page data ... โฒ โ Using edge runtime on a page currently disables static generation for that page โฒ Generating static pages (0/3) ... โฒ โ Generating static pages (3/3) โฒ Finalizing page optimization ... โฒ Collecting build traces ... โฒ โฒ Route (app) Size First Load JS โฒ โ ฦ / 893 B 101 kB โฒ โ ฦ /_not-found 143 B 99.9 kB โฒ โ ฦ /api/hello 143 B 99.9 kB โฒ + First Load JS shared by all 99.7 kB โฒ โ chunks/955-85ea8d45a2b96474.js 45.4 kB โฒ โ chunks/fe91931f-570d654fec06ca4c.js 52.5 kB โฒ โ other shared chunks (total) 1.85 kB โฒ ฦ (Dynamic) server-rendered on demand โฒ Traced Next.js server files in: 133.16ms โฒ Created all serverless functions in: 26.187ms โฒ Collected static files (public/, static/, .next/static): 2.708ms โฒ Build Completed in .vercel/output [17s] โก๏ธ Completed `pnpm exec vercel build`. โก๏ธ Build Summary (@cloudflare/next-on-pages v0.0.0-e9c9571 (prerelease for PR #918)) โก๏ธ โก๏ธ Edge Function Routes (3) โก๏ธ โ / โก๏ธ โ /_not-found โก๏ธ โ /api/hello โก๏ธ โก๏ธ Prerendered Routes (1) โก๏ธ - /favicon.ico โก๏ธ โก๏ธ Other Static Assets (31) โก๏ธ โ /_app.rsc.json โก๏ธ โ /_document.rsc.json โก๏ธ โ /_error.rsc.json โก๏ธ โ /500.html โก๏ธ โ ... 27 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.55s โ ๏ธ wrangler 3.93.0 ------------------- Attaching additional modules: โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฌโโโโโโโฌโโโโโโโโโโโโโโ โ Name โ Type โ Size โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโผโโโโโโโโโโโโโโค โ __next-on-pages-dist__/cache/adaptor.js โ esm โ 2.29 KiB โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโผโโโโโโโโโโโโโโค โ __next-on-pages-dist__/cache/cache-api.js โ esm โ 0.43 KiB โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโผโโโโโโโโโโโโโโค โ __next-on-pages-dist__/cache/kv.js โ esm โ 0.35 KiB โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโผโโโโโโโโโโโโโโค โ __next-on-pages-dist__/functions/_not-found.func.js โ esm โ 27.91 KiB โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโผโโโโโโโโโโโโโโค โ __next-on-pages-dist__/functions/api/hello.func.js โ esm โ 84.17 KiB โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโผโโโโโโโโโโโโโโค โ __next-on-pages-dist__/functions/index.func.js โ esm โ 751.30 KiB โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโผโโโโโโโโโโโโโโค โ __next-on-pages-dist__/manifest/88a389dd6c068190adb2efc795e4063c.js โ esm โ 0.49 KiB โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโผโโโโโโโโโโโโโโค โ __next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js โ esm โ 511.28 KiB โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโผโโโโโโโโโโโโโโค โ __next-on-pages-dist__/webpack/b465e2da52c2b3f0e001285e1ab21a6b.js โ esm โ 142.75 KiB โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโผโโโโโโโโโโโโโโค โ Total (9 modules) โ โ 1520.95 KiB โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโดโโโโโโโดโโโโโโโโโโโโโโ โจ Compiled Worker successfully โจ Parsed 1 valid header rule. โ Starting local server... [wrangler:inf] Ready on http://localhost:8788 โ [ERROR] โจฏ TypeError: Illegal invocation: function called with incorrect `this` reference. See https://developers.cloudflare.com/workers/observability/errors/#illegal-invocation-errors for details. at null.<anonymous> (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/index.func.js:4:16175) at 2612 (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/index.func.js:4:16281) at Function.u (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/index.func.js:1:14221) at async jt (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:18:14555) at async Ut (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:18:18227) at null.<anonymous> (async file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:18:20483) at async Promise.all (index 0) at async Ut (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:18:20288) at async Yt (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:23:4415) at async qr (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:24:3245) โ [ERROR] โจฏ TypeError: Cannot read properties of null (reading 'default') at Object.loadComponent (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:42:10518) at sa.findPageComponents (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:42:5892) at sa.renderErrorToResponseImpl (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:29:11382) at async sa.renderToResponseImpl (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:29:9473) at async sa.pipeImpl (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:27:17475) at async sa.handleCatchallRenderRequest (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:42:3313) at async sa.runImpl (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:27:17202) at async sa.handleRequestImpl (file:///Users/qiushi/workspace/my-website/next-illegal-invocation/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/4d401082acee73bc02d7fbf9b535ab71.js:27:16029) [wrangler:inf] GET / 500 Internal Server Error (82ms) ``` ### Reproduction Clone https://github.com/qiushiyan/next-illegal-invocation and run `pnpm preview` and go to the home page, with `next build && next start` this should display a syntax highlighted code block. ### 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?
AI Analysis
This issue appears to be discussing a feature request or bug report related to the repository. Based on the content, it seems to be still under discussion. The issue was opened by qiushiyan and has received 1 comments.
Add a comment
Comment form would go here