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

docs: setting up source maps for server-side code #7320

Open
DetachHead opened this issue Oct 20, 2022 · 5 comments · May be fixed by #12506
Open

docs: setting up source maps for server-side code #7320

DetachHead opened this issue Oct 20, 2022 · 5 comments · May be fixed by #12506
Labels
documentation Improvements or additions to documentation vite
Milestone
non-urgent

Comments

@DetachHead
Copy link

DetachHead commented Oct 20, 2022 •
edited
Loading

Describe the bug

source maps don't seem to work on server-side code.

i enabled them in like 4 different spots because i have no idea which one is supposed to work:

svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

const config = {
    compilerOptions: {
        enableSourcemap: true, // here
    },
    preprocess: preprocess({
        sourceMap: true, // here
    }),
    kit: {
       adapter: adapter()
    }
};

export default config;

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';

const config: UserConfig = {
	plugins: [sveltekit()],
    build: {
        sourcemap: true, // here
    },
};

export default config;

tsconfig.json

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true, // here
		"strict": true
	}
}

to reproduce

  1. clone the repro repo (link below)
  2. npm install && npm run dev
  3. navigate to the site and click the button

the debugger statement is hit but the compiled js is displayed instead of the source code:
image

Reproduction

https:/DetachHead/sveltekit-issue

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11500T @ 1.50GHz
    Memory: 952.27 MB / 15.73 GB
  Binaries:
    Node: 18.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.62)   
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.84
    @sveltejs/kit: next => 1.0.0-next.520
    svelte: ^3.44.0 => 3.52.0
    vite: ^3.1.0 => 3.1.8

Severity

serious, but I can work around it

Additional Information

No response
@benmccann
Copy link
Member

This is an issue in Vite: vitejs/vite#3288

@benmccann benmccann added the vite label Oct 20, 2022
@benmccann benmccann added this to the whenever milestone Nov 9, 2022
@Leftium Leftium mentioned this issue Mar 4, 2023
Closed
@giacomoran
Copy link

I think this issue can be closed.

The linked Vite issue (vitejs/vite#3288) has been closed.
The original example works, the debugger statement is presented in the source file by VSCode.

I've also created a skeleton SvelteKit project configured to generate and auto-load source maps: https:/giacomoran/sveltekit-source-maps

@benmccann
Copy link
Member

benmccann commented Jul 2, 2024 •
edited
Loading

It looks to me like @giacomoran was able to get this working with the following in package.json:

"preview": "NODE_OPTIONS=--enable-source-maps vite preview",

And the following in vite.config.js:

  build: {
    sourcemap: true,
  },

Perhaps we need to update https://kit.svelte.dev/docs/debugging with these steps

@benmccann benmccann added the documentation Improvements or additions to documentation label Jul 2, 2024
@benmccann benmccann changed the title source maps don't work on server-side code docs: setting up source maps for server-side code Jul 2, 2024
@theetrain
Copy link
Contributor

theetrain commented Jul 21, 2024 •
edited
Loading

I added a demo: https:/theetrain/7320-svelte-server-debugging

Despite following #7320 (comment), I could not get breakpoints to work within src/routes/+page.server.js@load.

The source maps appear in Chrome Dev tools when I manually add the repository to the "sources" workspace, but breakpoints in server-side files won't trigger. Not sure what I'm missing.

image

@theetrain
Copy link
Contributor

Scratch that, I forgot to add --inspect and to launch the Node debugger, and it works! I can probably resolve this in the docs.

@theetrain theetrain linked a pull request Jul 26, 2024 that will close this issue
Draft
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation Improvements or additions to documentation vite
Projects
None yet
Milestone
non-urgent
Development

Successfully merging a pull request may close this issue.

docs(debug): add server-side debug guide WIP theetrain/kit
4 participants
@benmccann @giacomoran @theetrain @DetachHead