Vite: incorrect sourcemaps off by a couple lines

[pcattori]

Reproduction

• npx create-remix@latest --template remix-run/remix/templates/unstable-vite
• Add a console.log in app/routes/_index.tsx in the module scope above the default component export
• Go to app in browser, open up console, and click on link to _index.tsx for the logged message
• Taken to incorrect line within the component instead of the console.log line

Additionally, if loader is added above console.log, seems to also offset the sourcemap for the console.log to the last line of the loader. Clicking on a line to add a breakpoints now also sometimes sets the breakpoint on a different line.

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 178.45 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    pnpm: 8.13.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 120.0.6099.199
    Safari: 17.2.1
  npmPackages:
    @remix-run/dev: ^2.4.1 => 2.4.1
    @remix-run/node: ^2.4.1 => 2.4.1
    @remix-run/react: ^2.4.1 => 2.4.1
    @remix-run/serve: ^2.4.1 => 2.4.1
    vite: ^5.0.0 => 5.0.11

Used Package Manager

npm

Expected Behavior

Clicking on link to sourcemap from within console goes to the correct line. Clicking on line to add a breakpoint sets the breakpoint on that line.

Actual Behavior

Sourcemaps seems to be offset by a small number of lines.

[pcattori]

Seems like one potential cause could be settings the sourcemap to null:

• https://github.com/remix-run/remix/blob/66adc8f7eb7e10f566c32eb737adcb8418e14f22/packages/remix-dev/vite/plugin.ts#L1037
• https://github.com/remix-run/remix/blob/66adc8f7eb7e10f566c32eb737adcb8418e14f22/packages/remix-dev/vite/plugin.ts#L1072

See https://rollupjs.org/plugin-development/#source-code-transformations

[houmark]

I actually have an app (cannot share this one and not sure if I can reproduce in a simpler reproduction app) where, in dev in Chrome dev tools, the console.log shows 143 lines earlier than it actually is (line 128 vs line 271) with latest Remix stable 2.7.2 (and Vite with Cloudflare preset).

[tiagoad]

I'm also experiencing this problem in my remix+cloudflare setup. Good to see there's an open PR for this, thanks @IgnusG!

[TobyEalden]

I'm seeing this too with a remix SPA + tailwind setup - it's infuriating!

https://github.com/remix-run/remix/assets/1628365/1bdf438a-e26c-4c7e-9ff0-2abccf2e58d7

[TobyEalden]

https://github.com/remix-run/remix/pull/8970 fixes this issue for me.

[balbany]

+1 for suffering with this issue. Hanging in there for the PR to merge... Thanks 🙏

[tiagoad]

Looks like the PR was merged! :) @pcattori should we expect a minor with this fix soon? cheers!

[latata]

I have updated remix to 2.9.0-pre.4 but still have this issue. The debugger is a few lines below:

[pcattori]

@latata can you use vite-plugin-inspect and sourcemap visualization to determine what's causing your mismatch? Alternatively, you can provide a reproduction in StackBlitz