incorrect sourcemaps off by a couple lines #163

lhapaipai · 2024-11-12T19:43:52Z

Hi,
Thank you very much for this amazing plugin !!!
However, I encounter offsets in the sourcemaps that make Remix debugging with vscode complicated. By activating/deactivating your plugin, I realized that it was the plugin that was causing it.

environnement:

Linux
Node v20.18.0
VSCode 1.95.2

Reproduction

Here is a minimal example to reproduce the issue.

pnpm create remix
pnpm add remix-development-tools

{
  "dependencies": {
    "@remix-run/node": "^2.14.0",
    "@remix-run/react": "^2.14.0",
    "@remix-run/serve": "^2.14.0",
    "isbot": "^4.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remix-development-tools": "^4.7.6"
  },
}

add the plugin into vite config

// vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
+ import { remixDevTools } from "remix-development-tools";

declare module "@remix-run/node" {
  interface Future {
    v3_singleFetch: true;
  }
}

export default defineConfig({
  plugins: [
+   remixDevTools(),
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_singleFetch: true,
        v3_lazyRouteDiscovery: true,
      },
    }),
    tsconfigPaths(),
  ],
});

add a loader into the app/root.tsx

import type { LoaderFunctionArgs } from "@remix-run/node";
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import "./tailwind.css";

+ export const loader = async ({ request }: LoaderFunctionArgs) => {
+   const hello = "world";
+   return null;
+ };

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

Use VSCode to debug this app.
add a "Attach by Process ID" debugging method for vscode at .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "node"
    }
  ]
}

run pnpm run dev

start debugging and add a breakpoint at return null of the app/root.tsx loader function (line 14 in the screenshot)
browse http://localhost:5173

the breakpoint is not reached

if on the other hand we move our breakpoint a little lower in the code (line 18 in the screenshot). we notice that the breakpoint is reached but the inspection corresponds to 4 lines above. we have our hello = 'world'

if we remove the remix-development-tools plugin in the vite.config.js
start debugging and add a breakpoint at return null of the loader function (line 14 in the screenshot)
everything working fine

I hope I have been as clear as possible, do not hesitate if you would like more information.

have a great evening

The text was updated successfully, but these errors were encountered:

AlemTuzlak · 2024-11-12T19:46:20Z

I think this might be fixed in the react-router-devtools, I'll definitely check this out with them to see if it works properly. Thank you so much for the detailed repro!

lhapaipai · 2024-11-12T19:47:27Z

Thank you very much for the super fast response!! At your service!

AlemTuzlak · 2024-11-24T09:05:50Z

Hey @lhapaipai would you mind checking if this is still an issue with react-router-devtools and react router v7, I completely changed the approach and it should not augment source maps anymore

lhapaipai · 2024-11-24T20:07:27Z

Hi @AlemTuzlak,
thanks for your work, i didn't even notice that react router v7 was released and your plugin is already ready ✨✨!!

unfortunately the issue still exists with react-router v7 and react-router-devtools

environment same as above:

Linux
Node v20.18.0
VSCode 1.95.3

my package.json

{
  "name": "react-router-v7-hw",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "react-router build",
    "dev": "react-router dev",
    "start": "react-router-serve ./build/server/index.js",
    "typecheck": "react-router typegen && tsc --build --noEmit"
  },
  "dependencies": {
    "@react-router/node": "^7.0.1",
    "@react-router/serve": "^7.0.1",
    "isbot": "^5.1.17",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router": "^7.0.1"
  },
  "devDependencies": {
    "@react-router/dev": "^7.0.1",
    "@types/node": "^20",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "react-router-devtools": "^1.0.4",
    "tailwindcss": "^3.4.15",
    "typescript": "^5.6.3",
    "vite": "^5.4.11",
    "vite-tsconfig-paths": "^5.1.2"
  }
}

I took the same example as above.

My breakpoints are in the loader function of the root.tsx

import type { Route } from "./+types/root";

export async function loader({ request }: Route.LoaderArgs) {
  let foo = "bar";
  foo = "baz";
  return {
    foo,
  };
}

the example in video

react-router-v7-sans-audio.mp4

Do not hesitate if you want more informations

AlemTuzlak · 2024-11-24T20:09:13Z

Thank you so much, I'll look into this the first chance I get 🫡

AlemTuzlak · 2024-12-11T10:41:05Z

@lhapaipai for some reason on windows the breakpoints are never reached and the debugger doesn't work, would you mind installing:
npm i https://pkg.pr.new/forge42dev/react-router-devtools@170
and seeing if it works?

lhapaipai · 2024-12-12T12:23:50Z

Hi @AlemTuzlak,

unfortunately no, it seems to me that the offsets have changed but are still present.

I don't have much knowledge of source map generation when making changes to the code with a vite plugin, but by installing "vite-plugin-inspect" we can see that the offset comes from that.

// vite.config.ts
import { reactRouter } from "@react-router/dev/vite";
import autoprefixer from "autoprefixer";
import tailwindcss from "tailwindcss";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { reactRouterDevTools } from "react-router-devtools";
import Inspect from "vite-plugin-inspect";

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
  plugins: [Inspect(), reactRouterDevTools(), reactRouter(), tsconfigPaths()],
});

{
  "name": "react-router-7-sandbox",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "react-router build",
    "dev": "react-router dev",
    "start": "react-router-serve ./build/server/index.js",
    "typecheck": "react-router typegen && tsc --build --noEmit"
  },
  "dependencies": {
    "@react-router/node": "^7.0.1",
    "@react-router/serve": "^7.0.1",
    "react-router": "^7.0.1",
    "react-router-devtools": "https://pkg.pr.new/forge42dev/react-router-devtools@170",
    "vite-plugin-inspect": "0.8"
  },
  "devDependencies": {
    "@react-router/dev": "^7.0.1",
    "vite": "^5.4.11",
    "vite-tsconfig-paths": "^5.1.2"
  }
}

the const foo = "bar"; is moving from initial line 5 to 7.

using vite-plugin-inspect :

at vite:esbuild before react-router-devtools, the const foo = "bar" is at line 5.

at vite:import-analysis after react-router-devtools, the const foo = "bar" is at line 7.

finally the issue is not so serious. we can disable the plugin when we debug with our IDE

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig, loadEnv } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { reactRouterDevTools } from "react-router-devtools";


export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    plugins: [
      env.VSCODE_DEBUG
        ? undefined
        : reactRouterDevTools(),
      reactRouter(),
      tsconfigPaths(),
    ],
  };
});

Have a good day

AlemTuzlak · 2024-12-12T12:28:22Z

@lhapaipai Oh man, so my learnings lead me to the fact that vite allows you to pass back a new sourcemap for the things you've changed and then it handles it by merging sourcemaps, but I guess that's still not working, I'll try to figure it out, unfortunately windows isn't helping with the fact the debugger attachment isn't working, i'll try to get it up running on my mac and see if it works there

lhapaipai · 2024-12-12T12:36:44Z

I guess going forward blindly is impossible...

have you tried other methods on Windows ?

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "node"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "runtimeExecutable": "react-router",
      "runtimeArgs": ["dev"]
    },
    {
      "type": "node-terminal",
      "request": "launch",
      "name": "Launch command",
      "command": "./node_modules/.bin/react-router dev"
    }
  ]
}

AlemTuzlak · 2024-12-17T17:20:17Z

@lhapaipai sorry to bother you, I personally NEVER used debuggers so I'm having a bit of a rough time. After looking closely at your screenshots you get your breakpoints colored in red, I've been trying to figure out if there's some extra config that you add somewhere like tsconfig or vite config to get the breakpoints working correctly, mine are always unbound whatever I try to setup. Am I missing something obvious?

AlemTuzlak · 2024-12-17T17:35:15Z

also, i've pushed a change that should be the fix, if there's a way for us to talk easier than this issue would love to talk directly so I can try to figure out the root cause and fix it if this fix I pushed doesn't work @lhapaipai. Sorry for my lack of understanding of debuggers

AlemTuzlak · 2024-12-18T10:25:30Z

@lhapaipai just tested in a linux env, seems to be fixed now with the latest fix I pushed, could you please verify!

lhapaipai · 2024-12-18T19:40:58Z

Hi @AlemTuzlak, I just tested it and ... it works!! Many thanks and congratulations 🏆🏆🏆 !!
for your question about my configuration for debugging. everything i did is present in the .vscode/launch.json see above. no additional configuration.

In my case it is possible to encounter problems using: node version manager or volta and that you manage several versions of node on your system (the debugger attaches to the system instance while you use another version for your app). unfortunately on my side I only have a very basic knowledge of using node with windows.

so I could hardly help you except to advise you to test the debug under vscode first in a node js application with a code that is not transpiled. don't hesitate if i can help you

Good evening !! and thanks for all the work you do for React Router ... 🙏🙏🙏

AlemTuzlak mentioned this issue Dec 11, 2024

Improved sourcemap support #170

Open

13 tasks

lhapaipai closed this as completed Dec 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

incorrect sourcemaps off by a couple lines #163

incorrect sourcemaps off by a couple lines #163

lhapaipai commented Nov 12, 2024 •

edited

Loading

AlemTuzlak commented Nov 12, 2024

lhapaipai commented Nov 12, 2024

AlemTuzlak commented Nov 24, 2024

lhapaipai commented Nov 24, 2024

AlemTuzlak commented Nov 24, 2024

AlemTuzlak commented Dec 11, 2024

lhapaipai commented Dec 12, 2024 •

edited

Loading

AlemTuzlak commented Dec 12, 2024

lhapaipai commented Dec 12, 2024 •

edited

Loading

AlemTuzlak commented Dec 17, 2024

AlemTuzlak commented Dec 17, 2024

AlemTuzlak commented Dec 18, 2024

lhapaipai commented Dec 18, 2024

incorrect sourcemaps off by a couple lines #163

incorrect sourcemaps off by a couple lines #163

Comments

lhapaipai commented Nov 12, 2024 • edited Loading

Reproduction

AlemTuzlak commented Nov 12, 2024

lhapaipai commented Nov 12, 2024

AlemTuzlak commented Nov 24, 2024

lhapaipai commented Nov 24, 2024

AlemTuzlak commented Nov 24, 2024

AlemTuzlak commented Dec 11, 2024

lhapaipai commented Dec 12, 2024 • edited Loading

AlemTuzlak commented Dec 12, 2024

lhapaipai commented Dec 12, 2024 • edited Loading

AlemTuzlak commented Dec 17, 2024

AlemTuzlak commented Dec 17, 2024

AlemTuzlak commented Dec 18, 2024

lhapaipai commented Dec 18, 2024

lhapaipai commented Nov 12, 2024 •

edited

Loading

lhapaipai commented Dec 12, 2024 •

edited

Loading

lhapaipai commented Dec 12, 2024 •

edited

Loading