Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[🐛 Bug]: Error Illegal invocation: function called with incorrect this reference when using codehike #919

Open
1 task
qiushiyan opened this issue Dec 9, 2024 · 1 comment
Open
1 task

[🐛 Bug]: Error Illegal invocation: function called with incorrect this reference when using codehike #919

qiushiyan opened this issue Dec 9, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@qiushiyan
Copy link

qiushiyan commented Dec 9, 2024 •
edited
Loading

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 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?
@qiushiyan qiushiyan added the bug Something isn't working label Dec 9, 2024
@switz
Copy link

switz commented Dec 22, 2024

Seeing the same error, hmm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@switz @qiushiyan