incorrect sourcemaps off by a couple lines #163
Comments
|
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! |
|
Thank you very much for the super fast response!! At your service! |
|
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 |
|
Hi @AlemTuzlak, unfortunately the issue still exists with react-router v7 and react-router-devtools environment same as above:
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 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.mp4Do not hesitate if you want more informations |
|
Thank you so much, I'll look into this the first chance I get 🫡 |
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:
Reproduction
Here is a minimal example to reproduce the issue.
pnpm create remixpnpm 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.tsximport 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
VSCodeto 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 devstart debugging and add a breakpoint at
return nullof theapp/root.tsxloader function (line 14 in the screenshot)browse
http://localhost:5173the 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-toolsplugin in the vite.config.jsstart debugging and add a breakpoint at
return nullof 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: