SSR SourceMap not loaded when debugging

[DylanPiercey]

Describe the bug

Currently it looks like when debugging the node process with source maps enabled (node --inspect --enable-source-maps ./source.js) that the source maps are not actually loaded.

Reproduction

Load any file via ssrLoadModule with a debugger.
You will see that the debugger shows compiled code instead of the source.

eg:

source.js

const { createServer } = require('vite')

(async () => {
  const server = await createServer({ server: { middlewareMode: true } });
  await server.ssrLoadModule("./debug.js");
})();

debug.js

debugger;
console.log("debugging", import.meta.url);

Then run

node --inspect-brk --enable-source-maps ./source.js

And finally connect your favorite debugger.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
    Memory: 504.64 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Edge: 90.0.818.51
    Firefox: 87.0
    Safari: 14.1
  npmPackages:
    vite: ^2.2.4 => 2.2.4

Used package manager: npm

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[DylanPiercey]

As a side note, I believe if source-maps were supported in SSR mode we could get rid of the (slightly awkward) ssrFixStackTrace api.

[maomincoding]

@DylanPiercey yes.

[jere2101]

Hi,
Is there currently any plan or roadmap to fix this issue ?
I am currently working on a project with SvelteKit and one of the only things I'm missing painfully is the option to debug server side code.
Currently the only option is to put console.logs everywhere but on the server side especially in complex scenarios that's a big pain point.
In my opinion this is critical for a better developer experience, especially people that come from other languages will turn their back on something like svelteKit when they find out that they can't debug properly, instead have to use the console output.

Thanks in advance for help ;D

[gsxdsm]

This is a huge development workflow blocker - would be great to get fixes merged in!

[cyco130]

@gsxdsm Now there's a solution: cyco130/vavite#17

It may one day make it into Vite itself, maybe.

[gsxdsm]

Thanks cyco! Checked out vavite - very cool! I've been trying to get it working with Sveltekit (or at least the node-loader package into vite) but not having any luck. Will keep tinkering with it.

[cyco130]

but not having any luck

Here's an example repo. Feel free to open an issue at vavite's repo or hit me on Rakkas's Discord channel.

[gsxdsm]

That worked! Thank you so much!!