feat!: default to serverModuleFormat esm (#6949)

Co-authored-by: Mark Dalgleish <mark.john.dalgleish@gmail.com>

.changeset/v2-default-to-esm.md

@@ -0,0 +1,6 @@
+---
+"@remix-run/dev": major
+"@remix-run/serve": major
+---
+
+Default to serverModuleFormat esm, and update remix-serve to use dynamic import to support esm and cjs build outputs.

docs/file-conventions/remix-config.md

@@ -80,7 +80,7 @@ The URL prefix of the browser build with a trailing slash. Defaults to
 
 ## postcss
 
-Whether to process CSS using [PostCSS][postcss] if `postcss.config.js` is present. Defaults to `true`.
+Whether to process CSS using [PostCSS][postcss] if a PostCSS config file is present. Defaults to `true`.
 
 ## routes
 

docs/guides/migrating-react-router-app.md

@@ -481,7 +481,7 @@ If you are using TypeScript, you likely already have a `tsconfig.json` in your p
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "resolveJsonModule": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "baseUrl": ".",
     "noEmit": true,
     "paths": {

docs/guides/styling.md

@@ -489,19 +489,19 @@ For example, to use [Autoprefixer][autoprefixer], first install the PostCSS plug
 npm install -D autoprefixer
 ```
 
-Then add `postcss.config.js` in the Remix root referencing the plugin.
+Then add a PostCSS config file in the Remix root referencing the plugin.
 
-```js filename=postcss.config.js
+```js filename=postcss.config.cjs
 module.exports = {
   plugins: {
     autoprefixer: {},
   },
 };
 ```
 
-If you're using [Vanilla Extract][vanilla-extract-2], since it's already playing the role of CSS preprocessor, you may want to apply a different set of PostCSS plugins relative to other styles. To support this, you can export a function from `postcss.config.js` which is given a context object that lets you know when Remix is processing a Vanilla Extract file.
+If you're using [Vanilla Extract][vanilla-extract-2], since it's already playing the role of CSS preprocessor, you may want to apply a different set of PostCSS plugins relative to other styles. To support this, you can export a function from your PostCSS config file which is given a context object that lets you know when Remix is processing a Vanilla Extract file.
 
-```js filename=postcss.config.js
+```js filename=postcss.config.cjs
 module.exports = (ctx) => {
   return ctx.remix?.vanillaExtract
     ? {

docs/guides/typescript.md

@@ -53,7 +53,7 @@ Remix has TypeScript type definitions built-in as well. The starter templates cr
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "target": "ES2019",
     "strict": true,

integration/abort-signal-test.ts

@@ -1,8 +1,8 @@
 import { test } from "@playwright/test";
 
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
 
 let fixture: Fixture;
 let appFixture: AppFixture;

integration/action-test.ts

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
 
-import { createFixture, createAppFixture, js } from "./helpers/create-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture, selectHtml } from "./helpers/playwright-fixture";
+import { createFixture, createAppFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture, selectHtml } from "./helpers/playwright-fixture.js";
 
 test.describe("actions", () => {
   let fixture: Fixture;

integration/browser-entry-test.ts

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
 
-import type { AppFixture, Fixture } from "./helpers/create-fixture";
-import { createFixture, js, createAppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import type { AppFixture, Fixture } from "./helpers/create-fixture.js";
+import { createFixture, js, createAppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
 
 let fixture: Fixture;
 let appFixture: AppFixture;

integration/bug-report-test.ts

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
 
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
 
 let fixture: Fixture;
 let appFixture: AppFixture;

integration/catch-boundary-data-test.ts

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
 
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
 
 let fixture: Fixture;
 let appFixture: AppFixture;

integration/catch-boundary-test.ts

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
 
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
 
 test.describe("ErrorBoundary (thrown responses)", () => {
   let fixture: Fixture;

integration/cf-compiler-test.ts

@@ -4,7 +4,7 @@ import path from "node:path";
 import shell from "shelljs";
 import glob from "glob";
 
-import { createFixtureProject, js, json } from "./helpers/create-fixture";
+import { createFixtureProject, js, json } from "./helpers/create-fixture.js";
 
 const searchFiles = async (pattern: string | RegExp, files: string[]) => {
   let result = shell.grep("-l", pattern, files);
@@ -36,6 +36,7 @@ test.describe("cloudflare compiler", () => {
           private: true,
           sideEffects: false,
           main: "build/index.js",
+          type: "module",
           dependencies: {
             "@remix-run/cloudflare": "0.0.0-local-version",
             "@remix-run/cloudflare-workers": "0.0.0-local-version",

integration/compiler-mjs-output-test.ts

@@ -2,7 +2,7 @@ import { test, expect } from "@playwright/test";
 import * as fs from "node:fs";
 import * as path from "node:path";
 
-import { createFixtureProject, js } from "./helpers/create-fixture";
+import { createFixtureProject, js } from "./helpers/create-fixture.js";
 
 let projectDir: string;
 

integration/compiler-test.ts

@@ -10,9 +10,9 @@ import {
   json,
   createFixtureProject,
   css,
-} from "./helpers/create-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+} from "./helpers/create-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
 
 test.describe("compiler", () => {
   let fixture: Fixture;
@@ -25,8 +25,11 @@ test.describe("compiler", () => {
         // We need a custom config file here to test usage of `getDependenciesToBundle`
         // since this can't be serialized from the fixture object.
         "remix.config.js": js`
-          let { getDependenciesToBundle } = require("@remix-run/dev");
-          module.exports = {
+          import { getDependenciesToBundle } from "@remix-run/dev";
+          export default {
+            future: {
+              v2_routeConvention: true,
+            },
             serverDependenciesToBundle: [
               "esm-only-pkg",
               "esm-only-single-export",
@@ -94,8 +97,8 @@ test.describe("compiler", () => {
             return <div id="esm-only-single-export">{esmOnlyPkg}</div>;
           }
         `,
-        "app/routes/package-with-submodule.tsx": js`
-          import { submodule } from "@org/package/sub-package";
+        "app/routes/package-with-submodule.jsx": js`
+          import { submodule } from "@org/package/sub-package/index.js";
 
           export default function PackageWithSubModule() {
             return <div id="package-with-submodule">{submodule()}</div>;
@@ -146,7 +149,9 @@ test.describe("compiler", () => {
           version: "1.0.0",
         }),
         "node_modules/@org/package/sub-package/package.json": json({
-          module: "./esm/index.js",
+          module: "./index.js",
+          exports: "./index.js",
+          main: "./index.js",
           sideEffects: false,
         }),
         "node_modules/@org/package/sub-package/index.js": js`
@@ -160,6 +165,8 @@ test.describe("compiler", () => {
         "node_modules/@org/package/sub-package/esm/package.json": json({
           type: "module",
           sideEffects: false,
+          exports: "./esm/index.js",
+          main: "./esm/index.js",
         }),
         "node_modules/@org/package/sub-package/esm/index.js": js`
           export { default as submodule } from "./submodule.js";

integration/css-modules-test.ts

@@ -2,14 +2,14 @@ import { test, expect } from "@playwright/test";
 import globby from "globby";
 import fse from "fs-extra";
 
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
 import {
   createAppFixture,
   createFixture,
   css,
   js,
-} from "./helpers/create-fixture";
+} from "./helpers/create-fixture.js";
 
 const TEST_PADDING_VALUE = "20px";
 

integration/css-side-effect-imports-test.ts

@@ -1,14 +1,14 @@
 import { test, expect } from "@playwright/test";
 
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
 import {
   createAppFixture,
   createFixture,
   css,
   js,
   json,
-} from "./helpers/create-fixture";
+} from "./helpers/create-fixture.js";
 
 const TEST_PADDING_VALUE = "20px";
 
@@ -19,7 +19,7 @@ test.describe("CSS side-effect imports", () => {
   test.beforeAll(async () => {
     fixture = await createFixture({
       config: {
-        serverDependenciesToBundle: [/@test-package/],
+        serverDependenciesToBundle: ["react", /@test-package/],
       },
       files: {
         "app/root.tsx": js`
@@ -287,7 +287,10 @@ test.describe("CSS side-effect imports", () => {
         );
       };
     `,
-    "app/routes/commonjs-package-test.tsx": js`
+    "node_modules/@test-package/commonjs/package.json": json({
+      main: "./index.js",
+    }),
+    "app/routes/commonjs-package-test.jsx": js`
       import { Test } from "@test-package/commonjs";
       export default function() {
         return <Test />;

integration/custom-entry-server-test.ts

@@ -1,8 +1,8 @@
 import { expect, test } from "@playwright/test";
 
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
 
 let fixture: Fixture;
 let appFixture: AppFixture;

integration/defer-loader-test.ts

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
 
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
 
 let fixture: Fixture;
 let appFixture: AppFixture;

integration/defer-test.ts

@@ -1,9 +1,9 @@
 import { test, expect } from "@playwright/test";
 import type { ConsoleMessage, Page } from "@playwright/test";
 
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
 
 const ROOT_ID = "ROOT_ID";
 const INDEX_ID = "INDEX_ID";

integration/deno-compiler-test.ts

@@ -1,10 +1,10 @@
 import { test, expect } from "@playwright/test";
-import * as fse from "fs-extra";
+import fse from "fs-extra";
 import path from "node:path";
 import shell from "shelljs";
 import glob from "glob";
 
-import { createFixtureProject, js, json } from "./helpers/create-fixture";
+import { createFixtureProject, js, json } from "./helpers/create-fixture.js";
 
 let projectDir: string;
 
@@ -39,6 +39,7 @@ test.beforeAll(async () => {
       "package.json": json({
         private: true,
         sideEffects: false,
+        type: "module",
         dependencies: {
           "@remix-run/deno": "0.0.0-local-version",
           "@remix-run/react": "0.0.0-local-version",

integration/deterministic-build-output-test.ts

@@ -3,8 +3,8 @@ import globby from "globby";
 import fs from "node:fs";
 import path from "node:path";
 
-import type { FixtureInit } from "./helpers/create-fixture";
-import { createFixtureProject, js, css } from "./helpers/create-fixture";
+import type { FixtureInit } from "./helpers/create-fixture.js";
+import { createFixtureProject, js, css } from "./helpers/create-fixture.js";
 
 test("builds deterministically under different paths", async () => {
   // This test validates various flavors of remix virtual modules to ensure
@@ -28,7 +28,7 @@ test("builds deterministically under different paths", async () => {
   let init: FixtureInit = {
     files: {
       "postcss.config.js": js`
-        module.exports = {
+        export default {
           plugins: {
             "postcss-import": {},
           },

integration/error-boundary-test.ts

@@ -1,9 +1,9 @@
 import { test, expect } from "@playwright/test";
-import { ServerMode } from "@remix-run/server-runtime/mode";
 
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
 
 test.describe("ErrorBoundary", () => {
   let fixture: Fixture;

integration/error-boundary-v2-test.ts

@@ -1,10 +1,10 @@
 import type { Page } from "@playwright/test";
 import { test, expect } from "@playwright/test";
-import { ServerMode } from "@remix-run/server-runtime/mode";
 
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
 
 test.describe("ErrorBoundary", () => {
   let fixture: Fixture;

integration/error-data-request-test.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
 
 test.describe("ErrorBoundary", () => {
   let fixture: Fixture;