Merge branch 'dev' into fix-vite-no-watch-build-viteChildCompiler

.changeset/angry-poets-accept.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/serve": patch
+---
+
+Use node `fileURLToPath` to convert source map URL to path

.changeset/breezy-grapes-roll.md

@@ -1,18 +1,11 @@
 ---
-"@remix-run/dev": minor
+"@remix-run/dev": patch
 ---
 
-Vite: Error messages when .server files are referenced by client
+Vite: Error messages when `.server` files are referenced by client
 
-Previously, referencing a `.server` module from client code resulted in an error message like:
-
-```txt
-The requested module '/app/models/answer.server.ts' does not provide an export named 'isDateType'
-```
-
-Which was confusing because `answer.server.ts` _does_ provide the `isDateType` export,
-but Remix was replacing `.server` modules with empty modules (`export {}`) for the client build.
-
-Now, Remix explicitly fails at compile time when a `.server` module is referenced from client code
-and includes dedicated error messages depending on whether the import occurs in a route or a non-route
-module. The error messages also include links to relevant documentation.
+- Previously, referencing a `.server` module from client code resulted in an error message like:
+  - `The requested module '/app/models/answer.server.ts' does not provide an export named 'isDateType'`
+- This was confusing because `answer.server.ts` _does_ provide the `isDateType` export, but Remix was replacing `.server` modules with empty modules (`export {}`) for the client build
+- Now, Remix explicitly fails at compile time when a `.server` module is referenced from client code and includes dedicated error messages depending on whether the import occurs in a route or a non-route module
+- The error messages also include links to relevant documentation

contributors.yml

@@ -623,3 +623,4 @@
 - timkraut
 - alexanderson1993
 - signed
+- VHall1

packages/remix-dev/vite/build.ts

@@ -1,6 +1,7 @@
 import type * as Vite from "vite";
 import colors from "picocolors";
 
+import { preloadViteEsm } from "./import-vite-esm-sync";
 import type { ResolvedRemixVitePluginConfig } from "./plugin";
 
 async function extractRemixPluginConfig({
@@ -56,6 +57,10 @@ export async function build(
     mode,
   }: ViteBuildOptions
 ) {
+  // Ensure Vite's ESM build is preloaded at the start of the process
+  // so it can be accessed synchronously via `importViteEsmSync`
+  await preloadViteEsm();
+
   // For now we just use this function to validate that the Vite config is
   // targeting Remix, but in the future the return value can be used to
   // configure the entire multi-step build process.

packages/remix-dev/vite/dev.ts

@@ -1,6 +1,8 @@
 import type * as Vite from "vite";
 import colors from "picocolors";
 
+import { preloadViteEsm } from "./import-vite-esm-sync";
+
 export interface ViteDevOptions {
   clearScreen?: boolean;
   config?: string;
@@ -29,6 +31,10 @@ export async function dev(
     strictPort,
   }: ViteDevOptions
 ) {
+  // Ensure Vite's ESM build is preloaded at the start of the process
+  // so it can be accessed synchronously via `importViteEsmSync`
+  await preloadViteEsm();
+
   let vite = await import("vite");
   let server = await vite.createServer({
     root,

packages/remix-serve/cli.ts

@@ -20,12 +20,13 @@ process.env.NODE_ENV = process.env.NODE_ENV ?? "production";
 
 sourceMapSupport.install({
   retrieveSourceMap: function (source) {
-    // get source file without the `file://` prefix or `?t=...` suffix
-    let match = source.match(/^file:\/\/(.*)\?t=[.\d]+$/);
+    // get source file with the `file://` prefix
+    let match = source.match(/^file:\/\/(.*)$/);
     if (match) {
+      let filePath = url.fileURLToPath(source);
       return {
         url: source,
-        map: fs.readFileSync(`${match[1]}.map`, "utf8"),
+        map: fs.readFileSync(`${filePath}.map`, "utf8"),
       };
     }
     return null;

templates/express/server.js

@@ -11,12 +11,13 @@ import sourceMapSupport from "source-map-support";
 
 sourceMapSupport.install({
   retrieveSourceMap: function (source) {
-    // get source file without the `file://` prefix or `?t=...` suffix
-    const match = source.match(/^file:\/\/(.*)\?t=[.\d]+$/);
+    // get source file with the `file://` prefix
+    const match = source.match(/^file:\/\/(.*)$/);
     if (match) {
+      const filePath = url.fileURLToPath(source);
       return {
         url: source,
-        map: fs.readFileSync(`${match[1]}.map`, "utf8"),
+        map: fs.readFileSync(`${filePath}.map`, "utf8"),
       };
     }
     return null;