HMR (unstable_dev in 1.16.0) loses TypeScript sourcemap support

[barrymay]

What version of Remix are you using?

1.16.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

FYI - This was found when trying to see emotion work under Remix HMR/HDR (which it does! 😀) but when trying to debug a related issue, I saw this which makes the investigation harder.

Show the Proper behavior (by default)

• Clone https://github.com/barrymay/remix-examples.git (my fork of remix-run/examples)
• Open VSCode (or whatever IDE) under the emotion folder
• Go to branch Test-HMR-on-latest-libraries
• run npm install (updates to latest react/remix/emotion) and npm run dev
• In the browser that opens, the app will work as expected w/o HMR support
• In Chrome DevTools, hit Cmd-P and navigate to index.tsx (under /app/routes)
• You'll see the expected typescript representation and be able to debug with it (PASS)

Add HMR and show the failing behavior

• Open remix.config.js, and uncomment

  future: {
    unstable_dev: true
  }, 

• Run npm run dev
• App will start, HMR/HDR will work great
• In Chrome Devtools, hit Cmd-P and navigate to index.tsx
• The JS representation is shown in the source files (it's kinda hard to find in the first place)

Expected Behavior

The TypeScript sourcemaps should be respected as they are without HMR on.

Actual Behavior

The TypeScript sourcemaps are not represented properly and only the underlying JS (and more) is shown.

[tgds]

Same here. No sourcemaps. I'm on 1.17.0

[WesleyYue]

Can confirm it occurs in 1.18.0 as well under v2_dev

[barrymay]

Tried today on 1.18.1, with a barebones create-remix app, and sadly same issue. For developer efficiency, TS sourcemaps are a critical browser feature for debuggability of an app, so I can't move to remix DEV mode until this is sorted.

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-da44482-20230706 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[bmaycc]

Tested the nightly with my example - looks great @pcattori, thanks !

[github-actions]

🤖 Hello there,

We just published version 1.19.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 1.19.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[jgentes]

I'm still seeing broken sourcemaps in 1.19.3. My remix.config.js (setup for Cloudflare Pages):

/** @type {import('@remix-run/dev').AppConfig} */
export default {
	ignoredRouteFiles: ['**/.*'],
	server: './server.ts',
	serverBuildPath: 'functions/[[path]].js',
	serverConditions: ['workerd', 'worker', 'browser'],
	serverDependenciesToBundle: 'all',
	serverMainFields: ['browser', 'module', 'main'],
	serverMinify: true,
	serverModuleFormat: 'esm',
	serverPlatform: 'neutral',
	serverNodeBuiltinsPolyfill: {},
	future: {
		v2_dev: true,
		v2_routeConvention: true,
		v2_errorBoundary: true,
		v2_meta: true,
		v2_normalizeFormMethod: true,
		v2_headers: true
	}
}