sveltejs / sveltejs/kit

Replace vague, underlying errors with more explicit ones.

Open
#15,034 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

error handling
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

I found that when a dependency requires a Node.js core module that is not installed, running npm run dev and accessing the page will show the correct page content for one second, then the page turns into "500 Internal Error", and the console shows the following error:

TypeError: Class extends value undefined is not a constructor or null

This error message is very confusing and gives no clue where the problem is. And if the dependency’s documentation is unclear, it becomes difficult to troubleshoot.

I thought Irys and SvelteKit were incompatible. I tried some methods but couldn't solve it. Then I created a new frontend project using nuxt.js, and importing it there works normally and no error appears in the console.

However, when actually calling Irys functions, nuxt.js shows an error: ReferenceError: Buffer is not defined irys.ts:79:9. After searching, I learned that Irys uses Node.js’s Buffer, which doesn’t exist in the browser environment. You need to install the buffer package. I searched the Irys documentation for keywords and finally found, far away from the current [viem-v2](https://docs.irys.xyz/build/d/irys-in-the-browser#viem-v2) page, an additional note at the bottom saying that Vite needs Node.js core package polyfills installed:

npm uninstall --save-dev \
    crypto-browserify \
    stream-browserify \
    os-browserify \
    path-browserify \
    vite-plugin-node-polyfills

After installing the above packages in the SvelteKit project, the page displays correctly and no errors appear.

I suggest that for low-level error messages, it would be helpful to add more checks—similar to how nuxt.js gives more meaningful error messages—to make it easier for users to identify and troubleshoot issues.

Reproduction
npx sv create my-app
cd my-app
// https://docs.irys.xyz/build/d/irys-in-the-browser#viem-v2
npm install \
    @irys/web-upload \
    @irys/web-upload-ethereum \
    @irys/web-upload-ethereum-viem-v2 \
    viem

Create a new home page, and as long as @irys/web-upload is imported, the above error will occur.

// my-app\src\routes\home\+page.svelte
<script lang="ts">
import { WebUploader } from '@irys/web-upload'
</script>
<p>hello</p>
Logs

System Info
System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-10710U CPU @ 1.10GHz
    Memory: 4.44 GB / 15.84 GB
  Binaries:
    Node: 20.19.6 - C:\nvm4w\nodejs\node.EXE
    npm: 10.8.2 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Chrome: 142.0.7444.176
    Edge: Chromium (142.0.3595.94)
    Internet Explorer: 11.0.19041.5794
  npmPackages:
    @sveltejs/adapter-auto: ^7.0.0 => 7.0.0
    @sveltejs/kit: ^2.48.5 => 2.49.1
    @sveltejs/vite-plugin-svelte: ^6.2.1 => 6.2.1
    svelte: ^5.43.8 => 5.45.5
    vite: ^7.2.2 => 7.2.6
Severity

annoyance

Additional Information

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the problem with npm run dev using the supplied +page.svelte example and the listed Irys packages. Trace where the TypeError is surfaced when a Node.js core module is unavailable, then determine the project entry point and tests for improving that diagnostic. Done means the missing dependency produces an explicit, actionable error instead of the vague underlying exception.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js, typescript, vite
Domain
build-system, developer-experience, frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.