Vite: incorrect sourcemaps off by a couple lines

pcattori commented 7 months ago

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 commented 7 months ago

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

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

houmark commented 5 months ago

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 commented 5 months ago

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

TobyEalden commented 5 months ago

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 commented 5 months ago

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

balbany commented 4 months ago

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

tiagoad commented 4 months ago

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

latata commented 4 months ago

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

pcattori commented 3 months ago

@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

remix-run / remix