fix (templates): Add source map retrieval fix to Express template

[kiliman]

This PR updates the the Express template and fixes the issue where source maps are not getting used. This was traced to how the map file is loaded when HMR reloads the server file with the ?t=timestamp suffix.

This causes the source map to not be found and therefore not used.

Adding the hook for retrieveSourceMap, this strips out the unexpected characters from the filename and properly returns the source map.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9a4596a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[brophdawg11]

What's the best way to recreate the original issue just so I can give this a quick test locally? I assume this impacts server-side sourcemaps? I tried putting a debugger in a route component and loader and using the VSCode debugger but it took me to the correct source file before and after an HMR update.

[kiliman]

Yeah, I wasn't sure how to do an automated test for this.

This is how I'm testing now:

// routes/_index.tsx
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>
  );
}

Click on the submit button. It should throw a server-side exception.

Check the stack trace to make sure it shows the actual source file and not the compiled version.

The issue shows up when you make a change that causes Remix to rebuild (imports index.js?t=timestamp).

Make a change then press the submit button again.

It should still show the correct stack trace. Without the fix, it will show the compiled version since it didn't know how to find the map file for the file with the timestamp suffix.

Also, this doesn't affect debugging. The issue is with the stack trace when logging the error via source-map-support.

NOTE: There's PR #8174 that fixes this for remix-serve. And there's a discussion that talks about the problem and the solution #8168.

[brophdawg11]

Ah ok thanks @kiliman. Let's just use the other PR since it updates both spots together 👍

[kiliman]

Yeah, sorry I messed up the PRs. It's been awhile.