Replace vague, underlying errors with more explicit ones.

[anyongjin]

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