Declaring new PublicKey(...) from @solana/web3.js breaks the entire app

[pratamatama]

Environment

• Operating System: Darwin
• Node Version: v18.17.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: pnpm@8.8.0
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

Reproduction

See this minimal reproduction on StackBlitz

OR

1. Clone this repository
2. Install dependencies, pnpm install
3. Run the dev server, pnpm dev
4. Go to localhost:3000 in the browser
5. The page will show 500 error screen
6. 2 exceptions will be thrown to the IDE console/terminal
   • [nitro] [uncaughtException] Class extends value #<Object> is not a constructor or null
   • [nuxt] [request error] [unhandled] [500] Cannot access 'renderer$1' before initialization
7. The root cause is inside the server/api/transactions/create.post.ts at line 24
8. Comment those line, do a browser refresh and the error should be gone

Describe the bug

I believe declaring new PublicKey(...) should not break the entire app. But it did otherwise.

Additional context

I'm trying to integrate Solana to my app, but failed on implementing the server side code. As mentioned on the reproduction steps, the error is caused by new PublicKey(...) declaration.

I have tried to reproduce using another framework like Next or Elysia, everything works fine. So I think it might be a bug. I am not sure if this were on Nuxt or Nitro, but either way, this should not be happen.

Please let me know if I am supposed to post this on nitro's repo.

Logs

> nuxt dev

Nuxt 3.11.2 with Nitro 2.9.6                                                                                                                                       11:31:14 PM
                                                                                                                                                                   11:31:14 PM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Option + D in the browser (v1.3.1)                                                                                                     11:31:15 PM

ℹ Vite client warmed up in 792ms                                                                                                                                  11:31:17 PM
ℹ Vite server warmed up in 940ms                                                                                                                                  11:31:17 PM
✔ Nuxt Nitro server built in 1001 ms                                                                                                                        nitro 11:31:18 PM

 ERROR  [nitro] [uncaughtException] Class extends value #<Object> is not a constructor or null

  at <anonymous> (node_modules/.pnpm/@solana+web3.js@1.91.8/node_modules/@solana/web3.js/lib/index.cjs.js:4174:68)
  at ModuleJob.run (node:internal/modules/esm/module_job:194:25)


 ERROR  [nuxt] [request error] [unhandled] [500] Cannot access 'renderer$1' before initialization
  at <anonymous> (./node_modules/.pnpm/nuxt@3.11.2_@opentelemetry+api@1.8.0_@unocss+reset@0.60.2_floating-vue@5.2.2_unocss@0.60.2_vite@5.2.11/node_modules/nuxt/dist/core/runtime/nitro/error.js:64:2)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async ./node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:1962:19  
  at async Object.callAsync (./node_modules/.pnpm/unctx@2.3.1/node_modules/unctx/dist/index.mjs:72:16)  
  at async Server.toNodeHandle (./node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:2249:7)


 ERROR  [nuxt] [request error] [unhandled] [500] Cannot access 'renderer$1' before initialization
  at <anonymous> (./node_modules/.pnpm/nuxt@3.11.2_@opentelemetry+api@1.8.0_@unocss+reset@0.60.2_floating-vue@5.2.2_unocss@0.60.2_vite@5.2.11/node_modules/nuxt/dist/core/runtime/nitro/error.js:64:2)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async ./node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:1962:19  
  at async Object.callAsync (./node_modules/.pnpm/unctx@2.3.1/node_modules/unctx/dist/index.mjs:72:16)  
  at async toNodeHandle (./node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:2249:7)  
  at async ufetch (./node_modules/.pnpm/unenv@1.9.0/node_modules/unenv/runtime/fetch/index.mjs:9:17)  
  at errorhandler (./node_modules/.pnpm/nuxt@3.11.2_@opentelemetry+api@1.8.0_@unocss+reset@0.60.2_floating-vue@5.2.2_unocss@0.60.2_vite@5.2.11/node_modules/nuxt/dist/core/runtime/nitro/error.js:37:41)  
  at async Server.toNodeHandle (./node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:2256:9)

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-klu6ql (Open reproduction)

[danilchernov]

@pratamatama It seems to me that the problem is related to the CJS version of the module, which is included in the bundle. Here's what they say about it in the documentation.

I explicitly specified the path to the ESM module and the error disappeared:
import { PublicKey } from '@solana/web3.js/lib/index.esm'

[danielroe]

Yes, this is an issue with that library, rather than Nuxt/Nitro.

[pratamatama]

Alright, cool! It works now.. I thought this was Nuxt/Nitro issue.
Thanks for the response @danilchernov @danielroe