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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: