Skip to content

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

Closed
#16412
Closed
docs: setting up source maps for server-side code#7320
#16412
Labels
documentationImprovements or additions to documentationvite
Milestone
non-urgent

Description

@DetachHead
DetachHead
opened on Oct 20, 2022

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://github.com/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

Activity

  1. benmccann commented on Oct 20, 2022

    @benmccann
    benmccann
    on Oct 20, 2022
    Member

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

  2. benmccann
    added
    vite
    on Oct 20, 2022
  3. benmccann
    added this to the whenever milestone on Nov 9, 2022

  4. giacomoran commented on Jan 9, 2024

    @giacomoran
    giacomoran
    on Jan 9, 2024

    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://github.com/giacomoran/sveltekit-source-maps

  5. benmccann commented on Jul 2, 2024

    @benmccann
    benmccann
    on Jul 2, 2024
    Member

    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

  6. benmccann
    added
    documentationImprovements or additions to documentation
    on Jul 2, 2024
  7. benmccann
    changed the title [-]source maps don't work on server-side code[/-] [+]docs: setting up source maps for server-side code[/+] on Jul 2, 2024

  8. theetrain commented on Jul 21, 2024

    @theetrain
    theetrain
    on Jul 21, 2024
    Contributor

    I added a demo: https://github.com/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

  9. theetrain commented on Jul 21, 2024

    @theetrain
    theetrain
    on Jul 21, 2024
    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.

  10. teemingc
    linked a pull request that will close this issuefeat: production sourcemaps #16412on Sep 2, 2026
  11. teemingc
    closed this as completedon Sep 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationvite

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions