@react-router/dev 7.6.3 → 7.7.0-pre.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # `@react-router/dev`
 
+## 7.7.0-pre.0
+
+### Patch Changes
+
+- Update `vite-node` to `^3.2.2` to support Vite 7 ([#13781](https://github.com/remix-run/react-router/pull/13781))
+- Properly handle `https` protocol in dev mode ([#13746](https://github.com/remix-run/react-router/pull/13746))
+- Fix missing styles when Vite's `build.cssCodeSplit` option is disabled ([#13943](https://github.com/remix-run/react-router/pull/13943))
+- Allow `.mts` and `.mjs` extensions for route config file ([#13931](https://github.com/remix-run/react-router/pull/13931))
+- Fix prerender file locations when `cwd` differs from project root ([#13824](https://github.com/remix-run/react-router/pull/13824))
+- Improve chunk error logging when a chunk cannot be found during the build ([#13799](https://github.com/remix-run/react-router/pull/13799))
+- Fix incorrectly configured `externalConditions` which had enabled `module` condition for externals and broke builds with certain packages, like Emotion. ([#13871](https://github.com/remix-run/react-router/pull/13871))
+- Updated dependencies:
+  - `react-router@7.7.0-pre.0`
+  - `@react-router/node@7.7.0-pre.0`
+  - `@react-router/serve@7.7.0-pre.0`
+
 ## 7.6.3
 
 ### Patch Changes

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v7.6.3
+ * @react-router/dev v7.7.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -743,7 +743,7 @@ var init_config = __esm({
       });
       return o;
     };
-    entryExts = [".js", ".jsx", ".ts", ".tsx"];
+    entryExts = [".js", ".jsx", ".ts", ".tsx", ".mjs", ".mts"];
   }
 });
 
@@ -1277,11 +1277,12 @@ var init_typegen = __esm({
 });
 
 // vite/node-adapter.ts
-var import_node_events, import_node_stream, import_set_cookie_parser, import_node;
+var import_node_events, import_node_tls, import_node_stream, import_set_cookie_parser, import_node;
 var init_node_adapter = __esm({
   "vite/node-adapter.ts"() {
     "use strict";
     import_node_events = require("events");
+    import_node_tls = require("tls");
     import_node_stream = require("stream");
     import_set_cookie_parser = require("set-cookie-parser");
     import_node = require("@react-router/node");
@@ -1494,10 +1495,6 @@ async function getEnvironmentOptionsResolvers(ctx, viteCommand) {
   );
   let { moduleSyncEnabled } = await import(`file:///${path6.join(packageRoot, "module-sync-enabled/index.mjs")}`);
   let vite2 = getVite();
-  let viteServerConditions = [
-    ...vite2.defaultServerConditions ?? [],
-    ...moduleSyncEnabled ? ["module-sync"] : []
-  ];
   function getBaseOptions({
     viteUserConfig
   }) {
@@ -1529,15 +1526,24 @@ async function getEnvironmentOptionsResolvers(ctx, viteCommand) {
   function getBaseServerOptions({
     viteUserConfig
   }) {
-    let conditions = viteCommand === "build" ? viteServerConditions : ["development", ...viteServerConditions];
+    let maybeModuleSyncConditions = [
+      ...moduleSyncEnabled ? ["module-sync"] : []
+    ];
+    let maybeDevelopmentConditions = viteCommand === "build" ? [] : ["development"];
+    let maybeDefaultServerConditions = vite2.defaultServerConditions || [];
+    let defaultExternalConditions = ["node"];
+    let baseConditions = [
+      ...maybeDevelopmentConditions,
+      ...maybeModuleSyncConditions
+    ];
     return mergeEnvironmentOptions(getBaseOptions({ viteUserConfig }), {
       resolve: {
         external: (
           // If `unstable_viteEnvironmentApi` is `true`, `resolve.external` is set in the `configEnvironment` hook
           ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? void 0 : ssrExternals
         ),
-        conditions,
-        externalConditions: conditions
+        conditions: [...baseConditions, ...maybeDefaultServerConditions],
+        externalConditions: [...baseConditions, ...defaultExternalConditions]
       },
       build: {
         // We move SSR-only assets to client assets. Note that the

package/dist/config.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.6.3
+ * @react-router/dev v7.7.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.6.3
+ * @react-router/dev v7.7.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/static/refresh-utils.cjs

@@ -158,8 +158,6 @@ const routeUpdates = new Map();
 window.__reactRouterRouteModuleUpdates = new Map();
 
 import.meta.hot.on("react-router:hmr", async ({ route }) => {
-  window.__reactRouterClearCriticalCss();
-
   if (route) {
     routeUpdates.set(route.id, route);
   }

package/dist/vite/cloudflare.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.6.3
+ * @react-router/dev v7.7.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -49,6 +49,7 @@ var import_react_router = require("react-router");
 
 // vite/node-adapter.ts
 var import_node_events = require("events");
+var import_node_tls = require("tls");
 var import_node_stream = require("stream");
 var import_set_cookie_parser = require("set-cookie-parser");
 var import_node = require("@react-router/node");
@@ -91,7 +92,8 @@ function fromNodeHeaders(nodeReq) {
   return headers;
 }
 function fromNodeRequest(nodeReq, nodeRes) {
-  let origin = nodeReq.headers.origin && "null" !== nodeReq.headers.origin ? nodeReq.headers.origin : `http://${nodeReq.headers.host}`;
+  let protocol = nodeReq.socket instanceof import_node_tls.TLSSocket && nodeReq.socket.encrypted ? "https" : "http";
+  let origin = nodeReq.headers.origin && "null" !== nodeReq.headers.origin ? nodeReq.headers.origin : `${protocol}://${nodeReq.headers.host}`;
   invariant(
     nodeReq.originalUrl,
     "Expected `nodeReq.originalUrl` to be defined"
@@ -734,7 +736,7 @@ function omitRoutes(config) {
     routes: {}
   };
 }
-var entryExts = [".js", ".jsx", ".ts", ".tsx"];
+var entryExts = [".js", ".jsx", ".ts", ".tsx", ".mjs", ".mts"];
 function isEntryFile(entryBasename, filename) {
   return entryExts.some((ext) => filename === `${entryBasename}${ext}`);
 }
@@ -801,10 +803,7 @@ var cloudflareDevProxyVitePlugin = (options = {}) => {
     name: PLUGIN_NAME,
     config: async (config, configEnv) => {
       await preloadVite();
-      const vite2 = getVite();
-      const serverConditions = [
-        ...vite2.defaultServerConditions ?? []
-      ];
+      const externalConditions = ["node"];
       let configResult = await loadConfig({
         rootDirectory: config.root ?? process.cwd(),
         mode: configEnv.mode
@@ -816,7 +815,7 @@ var cloudflareDevProxyVitePlugin = (options = {}) => {
       return {
         ssr: {
           resolve: {
-            externalConditions: [...workerdConditions, ...serverConditions]
+            externalConditions: [...workerdConditions, ...externalConditions]
           }
         }
       };

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.6.3
+ * @react-router/dev v7.7.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -740,7 +740,7 @@ function omitRoutes(config) {
     routes: {}
   };
 }
-var entryExts = [".js", ".jsx", ".ts", ".tsx"];
+var entryExts = [".js", ".jsx", ".ts", ".tsx", ".mjs", ".mts"];
 function isEntryFile(entryBasename, filename2) {
   return entryExts.some((ext) => filename2 === `${entryBasename}${ext}`);
 }
@@ -1232,6 +1232,7 @@ async function watch(rootDirectory, { mode, logger }) {
 
 // vite/node-adapter.ts
 var import_node_events = require("events");
+var import_node_tls = require("tls");
 var import_node_stream = require("stream");
 var import_set_cookie_parser = require("set-cookie-parser");
 var import_node = require("@react-router/node");
@@ -1262,7 +1263,8 @@ function fromNodeHeaders(nodeReq) {
   return headers;
 }
 function fromNodeRequest(nodeReq, nodeRes) {
-  let origin = nodeReq.headers.origin && "null" !== nodeReq.headers.origin ? nodeReq.headers.origin : `http://${nodeReq.headers.host}`;
+  let protocol = nodeReq.socket instanceof import_node_tls.TLSSocket && nodeReq.socket.encrypted ? "https" : "http";
+  let origin = nodeReq.headers.origin && "null" !== nodeReq.headers.origin ? nodeReq.headers.origin : `${protocol}://${nodeReq.headers.host}`;
   invariant(
     nodeReq.originalUrl,
     "Expected `nodeReq.originalUrl` to be defined"
@@ -2401,14 +2403,27 @@ var getPublicModulePathForEntry = (ctx, viteManifest, entryFilePath) => {
   let entryChunk = resolveChunk(ctx, viteManifest, entryFilePath);
   return entryChunk ? `${ctx.publicPath}${entryChunk.file}` : void 0;
 };
-var getReactRouterManifestBuildAssets = (ctx, viteManifest, entryFilePath, prependedAssetFilePaths = []) => {
+var getCssCodeSplitDisabledFile = (ctx, viteConfig, viteManifest) => {
+  if (viteConfig.build.cssCodeSplit) {
+    return null;
+  }
+  let cssFile = viteManifest["style.css"]?.file;
+  invariant(
+    cssFile,
+    "Expected `style.css` to be present in Vite manifest when `build.cssCodeSplit` is disabled"
+  );
+  return `${ctx.publicPath}${cssFile}`;
+};
+var getClientEntryChunk = (ctx, viteManifest) => {
+  let filePath = ctx.entryClientFilePath;
+  let chunk = resolveChunk(ctx, viteManifest, filePath);
+  invariant(chunk, `Chunk not found: ${filePath}`);
+  return chunk;
+};
+var getReactRouterManifestBuildAssets = (ctx, viteConfig, viteManifest, entryFilePath, route) => {
   let entryChunk = resolveChunk(ctx, viteManifest, entryFilePath);
-  invariant(entryChunk, "Chunk not found");
-  let prependedAssetChunks = prependedAssetFilePaths.map((filePath) => {
-    let chunk = resolveChunk(ctx, viteManifest, filePath);
-    invariant(chunk, "Chunk not found");
-    return chunk;
-  });
+  invariant(entryChunk, `Chunk not found: ${entryFilePath}`);
+  let isRootRoute = Boolean(route && route.parentId === void 0);
   let routeModuleChunks = routeChunkNames.map(
     (routeChunkName) => resolveChunk(
       ctx,
@@ -2416,19 +2431,31 @@ var getReactRouterManifestBuildAssets = (ctx, viteManifest, entryFilePath, prepe
       getRouteChunkModuleId(entryFilePath.split("?")[0], routeChunkName)
     )
   ).filter(isNonNullable);
-  let chunks = resolveDependantChunks(viteManifest, [
-    ...prependedAssetChunks,
-    entryChunk,
-    ...routeModuleChunks
-  ]);
+  let chunks = resolveDependantChunks(
+    viteManifest,
+    [
+      // If this is the root route, we also need to include assets from the
+      // client entry file as this is a common way for consumers to import
+      // global reset styles, etc.
+      isRootRoute ? getClientEntryChunk(ctx, viteManifest) : null,
+      entryChunk,
+      routeModuleChunks
+    ].flat(1).filter(isNonNullable)
+  );
   return {
     module: `${ctx.publicPath}${entryChunk.file}`,
     imports: dedupe(chunks.flatMap((e) => e.imports ?? [])).map((imported) => {
       return `${ctx.publicPath}${viteManifest[imported].file}`;
     }) ?? [],
-    css: dedupe(chunks.flatMap((e) => e.css ?? [])).map((href) => {
-      return `${ctx.publicPath}${href}`;
-    }) ?? []
+    css: dedupe(
+      [
+        // If CSS code splitting is disabled, Vite includes a singular 'style.css' asset
+        // in the manifest that isn't tied to any route file. If we want to render these
+        // styles correctly, we need to include them in the root route.
+        isRootRoute ? getCssCodeSplitDisabledFile(ctx, viteConfig, viteManifest) : null,
+        chunks.flatMap((e) => e.css ?? []).map((href) => `${ctx.publicPath}${href}`)
+      ].flat(1).filter(isNonNullable)
+    )
   };
 };
 function resolveDependantChunks(viteManifest, entryChunks) {
@@ -2742,16 +2769,19 @@ var reactRouterVitePlugin = () => {
     return sriManifest;
   };
   let generateReactRouterManifestsForBuild = async ({
+    viteConfig: viteConfig2,
     routeIds
   }) => {
-    invariant(viteConfig);
+    invariant(viteConfig2);
     let viteManifest = await loadViteManifest(
       getClientBuildDirectory(ctx.reactRouterConfig)
     );
     let entry = getReactRouterManifestBuildAssets(
       ctx,
+      viteConfig2,
       viteManifest,
-      ctx.entryClientFilePath
+      ctx.entryClientFilePath,
+      null
     );
     let browserRoutes = {};
     let serverRoutes = {};
@@ -2763,7 +2793,6 @@ var reactRouterVitePlugin = () => {
     for (let route of Object.values(ctx.reactRouterConfig.routes)) {
       let routeFile = path5.join(ctx.reactRouterConfig.appDirectory, route.file);
       let sourceExports = routeManifestExports[route.id];
-      let isRootRoute = route.parentId === void 0;
       let hasClientAction = sourceExports.includes("clientAction");
       let hasClientLoader = sourceExports.includes("clientLoader");
       let hasClientMiddleware = sourceExports.includes(
@@ -2802,12 +2831,10 @@ var reactRouterVitePlugin = () => {
         hasErrorBoundary: sourceExports.includes("ErrorBoundary"),
         ...getReactRouterManifestBuildAssets(
           ctx,
+          viteConfig2,
           viteManifest,
           `${routeFile}${BUILD_CLIENT_ROUTE_QUERY_STRING}`,
-          // If this is the root route, we also need to include assets from the
-          // client entry file as this is a common way for consumers to import
-          // global reset styles, etc.
-          isRootRoute ? [ctx.entryClientFilePath] : []
+          route
         ),
         clientActionModule: hasRouteChunkByExportName.clientAction ? getPublicModulePathForEntry(
           ctx,
@@ -2838,7 +2865,7 @@ var reactRouterVitePlugin = () => {
     let fingerprintedValues = { entry, routes: browserRoutes };
     let version = getHash(JSON.stringify(fingerprintedValues), 8);
     let manifestPath = path5.posix.join(
-      viteConfig.build.assetsDir,
+      viteConfig2.build.assetsDir,
       `manifest-${version}.js`
     );
     let url2 = `${ctx.publicPath}${manifestPath}`;
@@ -3608,7 +3635,9 @@ var reactRouterVitePlugin = () => {
           }
           case virtual.serverManifest.resolvedId: {
             let routeIds = getServerBundleRouteIds(this, ctx);
+            invariant(viteConfig);
             let reactRouterManifest = viteCommand === "build" ? (await generateReactRouterManifestsForBuild({
+              viteConfig,
               routeIds
             })).reactRouterServerManifest : await getReactRouterManifestForDev();
             if (!ctx.reactRouterConfig.ssr) {
@@ -4071,7 +4100,7 @@ async function handleSpaMode(viteConfig, reactRouterConfig, serverBuildDirectory
     );
   }
   await (0, import_promises2.writeFile)(path5.join(clientBuildDirectory, filename2), html);
-  let prettyDir = path5.relative(process.cwd(), clientBuildDirectory);
+  let prettyDir = path5.relative(viteConfig.root, clientBuildDirectory);
   let prettyPath = path5.join(prettyDir, filename2);
   if (build.prerender.length > 0) {
     viteConfig.logger.info(
@@ -4199,12 +4228,13 @@ async function prerenderData(handler, prerenderPath, onlyRoutes, clientBuildDire
 ${normalizedPath}`
     );
   }
-  let outdir = path5.relative(process.cwd(), clientBuildDirectory);
-  let outfile = path5.join(outdir, ...normalizedPath.split("/"));
+  let outfile = path5.join(clientBuildDirectory, ...normalizedPath.split("/"));
   await (0, import_promises2.mkdir)(path5.dirname(outfile), { recursive: true });
   await (0, import_promises2.writeFile)(outfile, data);
   viteConfig.logger.info(
-    `Prerender (data): ${prerenderPath} -> ${import_picocolors3.default.bold(outfile)}`
+    `Prerender (data): ${prerenderPath} -> ${import_picocolors3.default.bold(
+      path5.relative(viteConfig.root, outfile)
+    )}`
   );
   return data;
 }
@@ -4238,12 +4268,17 @@ async function prerenderRoute(handler, prerenderPath, clientBuildDirectory, reac
 ${html}`
     );
   }
-  let outdir = path5.relative(process.cwd(), clientBuildDirectory);
-  let outfile = path5.join(outdir, ...normalizedPath.split("/"), "index.html");
+  let outfile = path5.join(
+    clientBuildDirectory,
+    ...normalizedPath.split("/"),
+    "index.html"
+  );
   await (0, import_promises2.mkdir)(path5.dirname(outfile), { recursive: true });
   await (0, import_promises2.writeFile)(outfile, html);
   viteConfig.logger.info(
-    `Prerender (html): ${prerenderPath} -> ${import_picocolors3.default.bold(outfile)}`
+    `Prerender (html): ${prerenderPath} -> ${import_picocolors3.default.bold(
+      path5.relative(viteConfig.root, outfile)
+    )}`
   );
 }
 async function prerenderResourceRoute(handler, prerenderPath, clientBuildDirectory, reactRouterConfig, viteConfig, requestInit) {
@@ -4257,12 +4292,13 @@ async function prerenderResourceRoute(handler, prerenderPath, clientBuildDirecto
 ${content.toString("utf8")}`
     );
   }
-  let outdir = path5.relative(process.cwd(), clientBuildDirectory);
-  let outfile = path5.join(outdir, ...normalizedPath.split("/"));
+  let outfile = path5.join(clientBuildDirectory, ...normalizedPath.split("/"));
   await (0, import_promises2.mkdir)(path5.dirname(outfile), { recursive: true });
   await (0, import_promises2.writeFile)(outfile, content);
   viteConfig.logger.info(
-    `Prerender (resource): ${prerenderPath} -> ${import_picocolors3.default.bold(outfile)}`
+    `Prerender (resource): ${prerenderPath} -> ${import_picocolors3.default.bold(
+      path5.relative(viteConfig.root, outfile)
+    )}`
   );
 }
 async function getPrerenderPaths(prerender, ssr, routes, logWarning = false) {
@@ -4623,10 +4659,6 @@ async function getEnvironmentOptionsResolvers(ctx, viteCommand) {
   );
   let { moduleSyncEnabled } = await import(`file:///${path5.join(packageRoot, "module-sync-enabled/index.mjs")}`);
   let vite2 = getVite();
-  let viteServerConditions = [
-    ...vite2.defaultServerConditions ?? [],
-    ...moduleSyncEnabled ? ["module-sync"] : []
-  ];
   function getBaseOptions({
     viteUserConfig
   }) {
@@ -4658,15 +4690,24 @@ async function getEnvironmentOptionsResolvers(ctx, viteCommand) {
   function getBaseServerOptions({
     viteUserConfig
   }) {
-    let conditions = viteCommand === "build" ? viteServerConditions : ["development", ...viteServerConditions];
+    let maybeModuleSyncConditions = [
+      ...moduleSyncEnabled ? ["module-sync"] : []
+    ];
+    let maybeDevelopmentConditions = viteCommand === "build" ? [] : ["development"];
+    let maybeDefaultServerConditions = vite2.defaultServerConditions || [];
+    let defaultExternalConditions = ["node"];
+    let baseConditions = [
+      ...maybeDevelopmentConditions,
+      ...maybeModuleSyncConditions
+    ];
     return mergeEnvironmentOptions(getBaseOptions({ viteUserConfig }), {
       resolve: {
         external: (
           // If `unstable_viteEnvironmentApi` is `true`, `resolve.external` is set in the `configEnvironment` hook
           ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? void 0 : ssrExternals
         ),
-        conditions,
-        externalConditions: conditions
+        conditions: [...baseConditions, ...maybeDefaultServerConditions],
+        externalConditions: [...baseConditions, ...defaultExternalConditions]
       },
       build: {
         // We move SSR-only assets to client assets. Note that the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "7.6.3",
+  "version": "7.7.0-pre.0",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -60,14 +60,14 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/generator": "^7.21.5",
-    "@babel/parser": "^7.21.8",
-    "@babel/plugin-syntax-decorators": "^7.22.10",
-    "@babel/plugin-syntax-jsx": "^7.21.4",
-    "@babel/preset-typescript": "^7.21.5",
-    "@babel/traverse": "^7.23.2",
-    "@babel/types": "^7.22.5",
+    "isbot": "^5.1.11",
+    "@babel/core": "^7.27.7",
+    "@babel/generator": "^7.27.5",
+    "@babel/parser": "^7.27.7",
+    "@babel/plugin-syntax-jsx": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@babel/traverse": "^7.27.7",
+    "@babel/types": "^7.27.7",
     "@npmcli/package-json": "^4.0.1",
     "arg": "^5.0.1",
     "babel-dead-code-elimination": "^1.0.6",
@@ -85,13 +85,13 @@
     "set-cookie-parser": "^2.6.0",
     "tinyglobby": "^0.2.14",
     "valibot": "^0.41.0",
-    "vite-node": "^3.1.4",
-    "@react-router/node": "7.6.3"
+    "vite-node": "^3.2.2",
+    "@react-router/node": "7.7.0-pre.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
-    "@types/babel__generator": "^7.6.8",
-    "@types/babel__traverse": "^7.20.5",
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.20.7",
     "@types/dedent": "^0.7.0",
     "@types/express": "^4.17.9",
     "@types/jsesc": "^3.0.1",
@@ -100,6 +100,7 @@
     "@types/npmcli__package-json": "^4.0.0",
     "@types/prettier": "^2.7.3",
     "@types/set-cookie-parser": "^2.4.1",
+    "@types/semver": "^7.7.0",
     "esbuild-register": "^3.6.0",
     "execa": "5.1.1",
     "express": "^4.19.2",
@@ -108,16 +109,16 @@
     "typescript": "^5.1.6",
     "vite": "^6.1.0",
     "wireit": "0.14.9",
-    "wrangler": "^4.2.0",
-    "@react-router/serve": "7.6.3",
-    "react-router": "^7.6.3"
+    "wrangler": "^4.23.0",
+    "@react-router/serve": "7.7.0-pre.0",
+    "react-router": "^7.7.0-pre.0"
   },
   "peerDependencies": {
     "typescript": "^5.1.0",
     "vite": "^5.1.0 || ^6.0.0 || ^7.0.0",
     "wrangler": "^3.28.2 || ^4.0.0",
-    "@react-router/serve": "^7.6.3",
-    "react-router": "^7.6.3"
+    "@react-router/serve": "^7.7.0-pre.0",
+    "react-router": "^7.7.0-pre.0"
   },
   "peerDependenciesMeta": {
     "@react-router/serve": {