How to use sourcemap with remix dev ? #8168
Replies: 3 comments 9 replies
-
|
Looks like sourcemaps broke in v2+. I know they changed it where you had to install Interestingly, debugging works in that I can put a breakpoint and it will stop at that line. Exact same code: import { Form } from "@remix-run/react";
export async function action() {
throw new Error("Oops!");
}
export default function Index() {
return (
<div>
<h1>Welcome to Remix</h1>
<Form method="post">
<button>Submit</button>
</Form>
</div>
);
}Remix v1.19.3
Remix v2.0.0
Breakpoints still work in v2.0+
|
Beta Was this translation helpful? Give feedback.
-
|
Ok, I think I figured out the issue. I switched from using Remix App Server to Express and verified I verified that Then I was thinking, perhaps it's not finding the map file because of the Sure enough, as soon as I removed the timestamp, it worked. @pcattori Not sure if this is a known issue or not. // use a timestamp query parameter to bust the import cache
- return import(BUILD_URL + "?t=" + stat.mtimeMs);
+ return import(BUILD_URL);
}
It turns out that sourceMapSupport.install({
retrieveSourceMap: function (source) {
// get source file without the `file://` prefix or `?t=...` suffix
let match = source.match(/^file:\/\/(.*)\?t=[.\d]+$/);
if (match) {
return {
url: source,
map: fs.readFileSync(`${match[1]}.map`, "utf8"),
};
}
return null;
},
});And now it works correctly with or without the |
Beta Was this translation helpful? Give feedback.
-
|
Is this hook going to be required for any server adapter that wants to use
|
Beta Was this translation helpful? Give feedback.
-
|
I wonder why source map handling is a manual concern instead of something automatic. Hopefully, @pcattori may be able to answer that. Also, will this still be an issue as we proceed with Vite? |
Beta Was this translation helpful? Give feedback.
-
|
Thrilled to see other eyes on this issue, and thank you @kiliman for digging in and finding the cause! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, @kiliman, for suggesting those two fixes. I'm unsure about something: Does your #8174 fix also apply to remix dev? Does remix dev use remix-serve? |
Beta Was this translation helpful? Give feedback.
-
|
@Alex-Levacher Yes, #8174 will include the fix automatically for |
Beta Was this translation helpful? Give feedback.
-
|
Awesome ! |
Beta Was this translation helpful? Give feedback.
-
|
is source-map-support needed for remix express on vite? |
Beta Was this translation helpful? Give feedback.
-
|
We did not have source maps, but after adding it to our Express on Vite setup it works. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hello community,
I am currently facing an issue where I cannot find a solution. It appears that
remix devis not utilizing the sourcemaps.When I simulate an error in
routes/_index.tsxand then runnpm run dev, it throws an error, as expected. Where the problem arises is that the error is not pointed out using source maps to facilitate the debugging process.Here are the steps I followed:
npx create-remix@latest.routes/_index.tsxfile.npm run dev.This is when the error throws, but without pointing out the specific source of the error via a source map. It shows the error in the compiled file.
Is there something that I am missing here? Is there an additional step required to enable the use of source maps in this context?
Thank you so much for your time and assistance!
Beta Was this translation helpful? Give feedback.
All reactions