diff --git a/.changeset/v2-default-to-esm.md b/.changeset/v2-default-to-esm.md
new file mode 100644
index 00000000000..eb40e9fc193
--- /dev/null
+++ b/.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.
diff --git a/docs/file-conventions/remix-config.md b/docs/file-conventions/remix-config.md
index f64367bc852..3370fcf5262 100644
--- a/docs/file-conventions/remix-config.md
+++ b/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
diff --git a/docs/guides/migrating-react-router-app.md b/docs/guides/migrating-react-router-app.md
index c12fbf2bd60..20b4f7f3256 100644
--- a/docs/guides/migrating-react-router-app.md
+++ b/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": {
diff --git a/docs/guides/styling.md b/docs/guides/styling.md
index d91a56c12c5..a6799aafeaf 100644
--- a/docs/guides/styling.md
+++ b/docs/guides/styling.md
@@ -489,9 +489,9 @@ 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: {},
@@ -499,9 +499,9 @@ module.exports = {
};
```
-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
? {
diff --git a/docs/guides/typescript.md b/docs/guides/typescript.md
index e4e0d4854d9..ed2e89a7efb 100644
--- a/docs/guides/typescript.md
+++ b/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,
diff --git a/integration/abort-signal-test.ts b/integration/abort-signal-test.ts
index 0b62ee871a1..da0cb2b2bac 100644
--- a/integration/abort-signal-test.ts
+++ b/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;
diff --git a/integration/action-test.ts b/integration/action-test.ts
index e7d2c31e7ba..3171448fa25 100644
--- a/integration/action-test.ts
+++ b/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;
diff --git a/integration/browser-entry-test.ts b/integration/browser-entry-test.ts
index 9e0b7555d16..a7a9d41302b 100644
--- a/integration/browser-entry-test.ts
+++ b/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;
diff --git a/integration/bug-report-test.ts b/integration/bug-report-test.ts
index 6b0f1dedfcf..221ccb26895 100644
--- a/integration/bug-report-test.ts
+++ b/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;
diff --git a/integration/catch-boundary-data-test.ts b/integration/catch-boundary-data-test.ts
index 763f133c1a3..e4a3c852bdc 100644
--- a/integration/catch-boundary-data-test.ts
+++ b/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;
diff --git a/integration/catch-boundary-test.ts b/integration/catch-boundary-test.ts
index 5e05167d038..e4a8f5e78a2 100644
--- a/integration/catch-boundary-test.ts
+++ b/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;
diff --git a/integration/cf-compiler-test.ts b/integration/cf-compiler-test.ts
index a8523c0c3d3..13adcfc7148 100644
--- a/integration/cf-compiler-test.ts
+++ b/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",
diff --git a/integration/compiler-mjs-output-test.ts b/integration/compiler-mjs-output-test.ts
index 271d635c6e9..5f0012a93f7 100644
--- a/integration/compiler-mjs-output-test.ts
+++ b/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;
diff --git a/integration/compiler-test.ts b/integration/compiler-test.ts
index cb289c4d756..22099b05a22 100644
--- a/integration/compiler-test.ts
+++ b/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
{esmOnlyPkg}
;
}
`,
- "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 {submodule()}
;
@@ -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";
diff --git a/integration/css-modules-test.ts b/integration/css-modules-test.ts
index b849657ede5..cca4e50c8ba 100644
--- a/integration/css-modules-test.ts
+++ b/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";
diff --git a/integration/css-side-effect-imports-test.ts b/integration/css-side-effect-imports-test.ts
index 636a6a2995e..7d6b6fe0d45 100644
--- a/integration/css-side-effect-imports-test.ts
+++ b/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 ;
diff --git a/integration/custom-entry-server-test.ts b/integration/custom-entry-server-test.ts
index fdf84ac9dca..80ef0afe11a 100644
--- a/integration/custom-entry-server-test.ts
+++ b/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;
diff --git a/integration/defer-loader-test.ts b/integration/defer-loader-test.ts
index f7a6750777b..c73abc03bdb 100644
--- a/integration/defer-loader-test.ts
+++ b/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;
diff --git a/integration/defer-test.ts b/integration/defer-test.ts
index cbccc95eb6c..77004a83bca 100644
--- a/integration/defer-test.ts
+++ b/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";
diff --git a/integration/deno-compiler-test.ts b/integration/deno-compiler-test.ts
index 958b17a6530..506fabf6f62 100644
--- a/integration/deno-compiler-test.ts
+++ b/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",
diff --git a/integration/deterministic-build-output-test.ts b/integration/deterministic-build-output-test.ts
index df530619ee2..a3e9ef5fc8f 100644
--- a/integration/deterministic-build-output-test.ts
+++ b/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": {},
},
diff --git a/integration/error-boundary-test.ts b/integration/error-boundary-test.ts
index 28165e56efd..7966970f3c6 100644
--- a/integration/error-boundary-test.ts
+++ b/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;
diff --git a/integration/error-boundary-v2-test.ts b/integration/error-boundary-v2-test.ts
index 90520a292a5..c47b3708737 100644
--- a/integration/error-boundary-v2-test.ts
+++ b/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;
diff --git a/integration/error-data-request-test.ts b/integration/error-data-request-test.ts
index 3b682d73c20..5c3264dd198 100644
--- a/integration/error-data-request-test.ts
+++ b/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;
diff --git a/integration/error-sanitization-test.ts b/integration/error-sanitization-test.ts
index 0e6f04f0666..11ca66c72ed 100644
--- a/integration/error-sanitization-test.ts
+++ b/integration/error-sanitization-test.ts
@@ -1,9 +1,9 @@
import { test, expect } from "@playwright/test";
-import { ServerMode } from "@remix-run/server-runtime/mode";
-import type { Fixture } from "./helpers/create-fixture";
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js";
+import type { Fixture } from "./helpers/create-fixture.js";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
const routeFiles = {
"app/root.tsx": js`
diff --git a/integration/fetch-globals-test.ts b/integration/fetch-globals-test.ts
index 172602c8f3a..836eeccc1c5 100644
--- a/integration/fetch-globals-test.ts
+++ b/integration/fetch-globals-test.ts
@@ -1,7 +1,7 @@
import { test, expect } from "@playwright/test";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
let fixture: Fixture;
let appFixture: AppFixture;
diff --git a/integration/fetcher-layout-test.ts b/integration/fetcher-layout-test.ts
index 570da29b0ea..8bb70103e57 100644
--- a/integration/fetcher-layout-test.ts
+++ b/integration/fetcher-layout-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;
diff --git a/integration/fetcher-test.ts b/integration/fetcher-test.ts
index e92425aaa81..0f24cd3338a 100644
--- a/integration/fetcher-test.ts
+++ b/integration/fetcher-test.ts
@@ -1,8 +1,8 @@
import { expect, test } 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("useFetcher", () => {
let fixture: Fixture;
diff --git a/integration/file-uploads-test.ts b/integration/file-uploads-test.ts
index f95b8a0d406..e72d3b9ba47 100644
--- a/integration/file-uploads-test.ts
+++ b/integration/file-uploads-test.ts
@@ -1,10 +1,15 @@
import * as fs from "node:fs/promises";
import * as path from "node:path";
+import * as url from "node:url";
import { test, expect } from "@playwright/test";
-import { createFixture, createAppFixture, js } from "./helpers/create-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import {
+ createFixture,
+ createAppFixture,
+ js,
+} from "./helpers/create-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
test.describe("file-uploads", () => {
let fixture: Fixture;
@@ -15,12 +20,14 @@ test.describe("file-uploads", () => {
files: {
"app/fileUploadHandler.ts": js`
import * as path from "node:path";
+ import * as url from "node:url";
import {
unstable_composeUploadHandlers as composeUploadHandlers,
unstable_createFileUploadHandler as createFileUploadHandler,
unstable_createMemoryUploadHandler as createMemoryUploadHandler,
} from "@remix-run/node";
+ const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
export let uploadHandler = composeUploadHandlers(
createFileUploadHandler({
directory: path.resolve(__dirname, "..", "uploads"),
@@ -110,7 +117,9 @@ test.describe("file-uploads", () => {
>`);
let written = await fs.readFile(
- path.join(fixture.projectDir, "uploads/underLimit.txt"),
+ url.pathToFileURL(
+ path.join(fixture.projectDir, "uploads/underLimit.txt")
+ ),
"utf8"
);
expect(written).toBe(uploadData);
diff --git a/integration/flat-routes-test.ts b/integration/flat-routes-test.ts
index a55791d0af2..cb570a9a284 100644
--- a/integration/flat-routes-test.ts
+++ b/integration/flat-routes-test.ts
@@ -1,10 +1,10 @@
import { PassThrough } from "node:stream";
import { test, expect } from "@playwright/test";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
-import type { Fixture, AppFixture } from "./helpers/create-fixture";
-import { createFixtureProject } 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 { createFixtureProject } from "./helpers/create-fixture.js";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
let fixture: Fixture;
let appFixture: AppFixture;
diff --git a/integration/form-data-test.ts b/integration/form-data-test.ts
index 6a3750b498b..86e0832fcea 100644
--- a/integration/form-data-test.ts
+++ b/integration/form-data-test.ts
@@ -1,7 +1,7 @@
import { test, expect } from "@playwright/test";
-import { createFixture, js } from "./helpers/create-fixture";
-import type { Fixture } from "./helpers/create-fixture";
+import { createFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture } from "./helpers/create-fixture.js";
let fixture: Fixture;
diff --git a/integration/form-test.ts b/integration/form-test.ts
index e61282c7647..3ee83b4d4cf 100644
--- a/integration/form-test.ts
+++ b/integration/form-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 { getElement, PlaywrightFixture } from "./helpers/playwright-fixture";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { getElement, PlaywrightFixture } from "./helpers/playwright-fixture.js";
test.describe("Forms", () => {
let fixture: Fixture;
diff --git a/integration/headers-test.ts b/integration/headers-test.ts
index 72524bc13eb..09c06b06dfb 100644
--- a/integration/headers-test.ts
+++ b/integration/headers-test.ts
@@ -1,8 +1,8 @@
import { test, expect } from "@playwright/test";
-import { ServerMode } from "@remix-run/server-runtime/mode";
-import { createFixture, js } from "./helpers/create-fixture";
-import type { Fixture } from "./helpers/create-fixture";
+import { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js";
+import { createFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture } from "./helpers/create-fixture.js";
test.describe("headers export", () => {
let ROOT_HEADER_KEY = "X-Test";
diff --git a/integration/helpers/cf-template/package.json b/integration/helpers/cf-template/package.json
index 3f0c25d358a..95528f2f2a4 100644
--- a/integration/helpers/cf-template/package.json
+++ b/integration/helpers/cf-template/package.json
@@ -3,6 +3,7 @@
"private": true,
"sideEffects": false,
"main": "build/index.js",
+ "type": "module",
"scripts": {},
"dependencies": {
"@remix-run/cloudflare": "0.0.0-local-version",
diff --git a/integration/helpers/cf-template/remix.config.js b/integration/helpers/cf-template/remix.config.js
index c29ad1ce95a..267a92f6869 100644
--- a/integration/helpers/cf-template/remix.config.js
+++ b/integration/helpers/cf-template/remix.config.js
@@ -1,5 +1,5 @@
/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
+export default {
devServerBroadcastDelay: 1000,
ignoredRouteFiles: ["**/.*"],
server: "./server.ts",
diff --git a/integration/helpers/cf-template/tsconfig.json b/integration/helpers/cf-template/tsconfig.json
index 20f8a386a6c..29ed4ae9962 100644
--- a/integration/helpers/cf-template/tsconfig.json
+++ b/integration/helpers/cf-template/tsconfig.json
@@ -5,7 +5,7 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/integration/helpers/create-fixture.ts b/integration/helpers/create-fixture.ts
index 510d5c48297..cf4259c15fe 100644
--- a/integration/helpers/create-fixture.ts
+++ b/integration/helpers/create-fixture.ts
@@ -1,5 +1,6 @@
import type { Writable } from "node:stream";
import path from "node:path";
+import url from "node:url";
import fse from "fs-extra";
import express from "express";
import getPort from "get-port";
@@ -9,18 +10,16 @@ import serializeJavaScript from "serialize-javascript";
import { sync as spawnSync } from "cross-spawn";
import type { JsonObject } from "type-fest";
import type { AppConfig } from "@remix-run/dev";
-import { ServerMode } from "@remix-run/server-runtime/mode";
+import { ServerMode } from "../../build/node_modules/@remix-run/server-runtime/dist/mode.js";
+import type { ServerBuild } from "../../build/node_modules/@remix-run/server-runtime/dist/index.js";
+import { createRequestHandler } from "../../build/node_modules/@remix-run/server-runtime/dist/index.js";
+import { createRequestHandler as createExpressHandler } from "../../build/node_modules/@remix-run/express/dist/index.js";
// @ts-ignore
-import type { ServerBuild } from "../../build/node_modules/@remix-run/server-runtime";
-// @ts-ignore
-import { createRequestHandler } from "../../build/node_modules/@remix-run/server-runtime";
-// @ts-ignore
-import { createRequestHandler as createExpressHandler } from "../../build/node_modules/@remix-run/express";
-// @ts-ignore
-import { installGlobals } from "../../build/node_modules/@remix-run/node";
+import { installGlobals } from "../../build/node_modules/@remix-run/node/dist/index.js";
const TMP_DIR = path.join(process.cwd(), ".tmp", "integration");
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
export interface FixtureInit {
buildStdio?: Writable;
@@ -44,7 +43,7 @@ export function json(value: JsonObject) {
export async function createFixture(init: FixtureInit, mode?: ServerMode) {
installGlobals();
let projectDir = await createFixtureProject(init, mode);
- let buildPath = path.resolve(projectDir, "build");
+ let buildPath = url.pathToFileURL(path.join(projectDir, "build/index.js")).href;
let app: ServerBuild = await import(buildPath);
let handler = createRequestHandler(app, mode || ServerMode.Production);
@@ -153,7 +152,7 @@ export async function createFixtureProject(
mode?: ServerMode
): Promise {
let template = init.template ?? "node-template";
- let integrationTemplateDir = path.join(__dirname, template);
+ let integrationTemplateDir = path.resolve(__dirname, template);
let projectName = `remix-${template}-${Math.random().toString(32).slice(2)}`;
let projectDir = path.join(TMP_DIR, projectName);
@@ -206,7 +205,7 @@ export async function createFixtureProject(
to the \`global.INJECTED_FIXTURE_REMIX_CONFIG\` placeholder so it can
accept the injected config values. Either move all config values into
\`remix.config.js\` file, or spread the injected config,
- e.g. \`module.exports = { ...global.INJECTED_FIXTURE_REMIX_CONFIG }\`.
+ e.g. \`export default { ...global.INJECTED_FIXTURE_REMIX_CONFIG }\`.
`);
}
contents = contents.replace(
@@ -226,6 +225,12 @@ function build(
sourcemap?: boolean,
mode?: ServerMode
) {
+ // We have a "require" instead of a dynamic import in readConfig gated
+ // behind mode === ServerMode.Test to make jest happy, but that doesn't
+ // work for ESM configs, those MUST be dynamic imports. So we need to
+ // force the mode to be production for ESM configs when runtime mode is
+ // test.
+ mode = mode === ServerMode.Test ? ServerMode.Production : mode;
let buildArgs = ["node_modules/@remix-run/dev/dist/cli.js", "build"];
if (sourcemap) {
buildArgs.push("--sourcemap");
diff --git a/integration/helpers/deno-template/package.json b/integration/helpers/deno-template/package.json
index 406510217e7..2526103e527 100644
--- a/integration/helpers/deno-template/package.json
+++ b/integration/helpers/deno-template/package.json
@@ -2,6 +2,7 @@
"name": "remix-template-deno",
"private": true,
"sideEffects": false,
+ "type": "module",
"dependencies": {
"@remix-run/deno": "0.0.0-local-version",
"@remix-run/react": "0.0.0-local-version",
diff --git a/integration/helpers/deno-template/remix.config.js b/integration/helpers/deno-template/remix.config.js
index 696ba3c0b1a..7acad0f98bb 100644
--- a/integration/helpers/deno-template/remix.config.js
+++ b/integration/helpers/deno-template/remix.config.js
@@ -1,5 +1,5 @@
/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
+export default {
/*
If live reload causes page to re-render without changes (live reload is too fast),
increase the dev server broadcast delay.
diff --git a/integration/helpers/node-template/package.json b/integration/helpers/node-template/package.json
index 095f0ddddeb..e202cff6ca6 100644
--- a/integration/helpers/node-template/package.json
+++ b/integration/helpers/node-template/package.json
@@ -2,6 +2,7 @@
"name": "remix-template-remix",
"private": true,
"sideEffects": false,
+ "type": "module",
"scripts": {
"build": "node ../../../build/node_modules/@remix-run/dev/dist/cli.js build",
"dev": "node ../../../build/node_modules/@remix-run/dev/dist/cli.js dev",
diff --git a/integration/helpers/node-template/remix.config.js b/integration/helpers/node-template/remix.config.js
index 3f56260c2a8..a340a1c21d6 100644
--- a/integration/helpers/node-template/remix.config.js
+++ b/integration/helpers/node-template/remix.config.js
@@ -1,5 +1,5 @@
/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
+export default {
ignoredRouteFiles: ["**/.*"],
// appDirectory: "app",
// assetsBuildDirectory: "public/build",
diff --git a/integration/helpers/node-template/tsconfig.json b/integration/helpers/node-template/tsconfig.json
index 20f8a386a6c..29ed4ae9962 100644
--- a/integration/helpers/node-template/tsconfig.json
+++ b/integration/helpers/node-template/tsconfig.json
@@ -5,7 +5,7 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/integration/helpers/playwright-fixture.ts b/integration/helpers/playwright-fixture.ts
index c64c438b7ac..70e2c47036c 100644
--- a/integration/helpers/playwright-fixture.ts
+++ b/integration/helpers/playwright-fixture.ts
@@ -4,7 +4,7 @@ import { test } from "@playwright/test";
import cheerio from "cheerio";
import prettier from "prettier";
-import type { AppFixture } from "./create-fixture";
+import type { AppFixture } from "./create-fixture.js";
export class PlaywrightFixture {
readonly page: Page;
diff --git a/integration/hmr-log-test.ts b/integration/hmr-log-test.ts
index eca69ffc157..7607087d1b6 100644
--- a/integration/hmr-log-test.ts
+++ b/integration/hmr-log-test.ts
@@ -5,14 +5,13 @@ import path from "node:path";
import type { Readable } from "node:stream";
import getPort, { makeRange } from "get-port";
-import type { FixtureInit } from "./helpers/create-fixture";
-import { createFixtureProject, css, js, json } from "./helpers/create-fixture";
+import type { FixtureInit } from "./helpers/create-fixture.js";
+import { createFixtureProject, css, js, json } from "./helpers/create-fixture.js";
test.setTimeout(120_000);
let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
config: {
- serverModuleFormat: "cjs",
dev: {
port: options.devPort,
},
@@ -21,6 +20,7 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
"package.json": json({
private: true,
sideEffects: false,
+ type: "module",
scripts: {
dev: `node ./node_modules/@remix-run/dev/dist/cli.js dev -c "node ./server.js"`,
},
@@ -47,10 +47,11 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
}),
"server.js": js`
- let path = require("node:path");
- let express = require("express");
- let { createRequestHandler } = require("@remix-run/express");
- let { logDevReady, installGlobals } = require("@remix-run/node");
+ import path from "path";
+ import url from "url";
+ import express from "express";
+ import { createRequestHandler } from "@remix-run/express";
+ import { logDevReady, installGlobals } from "@remix-run/node";
installGlobals();
@@ -58,19 +59,19 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
app.use(express.static("public", { immutable: true, maxAge: "1y" }));
const MODE = process.env.NODE_ENV;
- const BUILD_DIR = path.join(process.cwd(), "build");
+ const BUILD_PATH = url.pathToFileURL(path.join(process.cwd(), "build", "index.js"));
app.all(
"*",
createRequestHandler({
- build: require(BUILD_DIR),
+ build: await import(BUILD_PATH),
mode: MODE,
})
);
let port = ${options.appPort};
- app.listen(port, () => {
- let build = require(BUILD_DIR);
+ app.listen(port, async () => {
+ let build = await import(BUILD_PATH);
console.log('✅ app ready: http://localhost:' + port);
if (process.env.NODE_ENV === 'development') {
logDevReady(build);
diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts
index 5fefafc6058..0339e97f5c1 100644
--- a/integration/hmr-test.ts
+++ b/integration/hmr-test.ts
@@ -5,14 +5,18 @@ import path from "node:path";
import type { Readable } from "node:stream";
import getPort, { makeRange } from "get-port";
-import type { FixtureInit } from "./helpers/create-fixture";
-import { createFixtureProject, css, js, json } from "./helpers/create-fixture";
+import type { FixtureInit } from "./helpers/create-fixture.js";
+import {
+ createFixtureProject,
+ css,
+ js,
+ json,
+} from "./helpers/create-fixture.js";
test.setTimeout(150_000);
let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
config: {
- serverModuleFormat: "cjs",
dev: {
port: options.devPort,
},
@@ -21,6 +25,7 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
"package.json": json({
private: true,
sideEffects: false,
+ type: "module",
scripts: {
dev: `node ./node_modules/@remix-run/dev/dist/cli.js dev -c "node ./server.js"`,
},
@@ -48,30 +53,30 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
}),
"server.js": js`
- let path = require("node:path");
- let express = require("express");
- let { createRequestHandler } = require("@remix-run/express");
- let { broadcastDevReady, installGlobals } = require("@remix-run/node");
+ import path from "path";
+ import url from "url";
+ import express from "express";
+ import { createRequestHandler } from "@remix-run/express";
+ import { broadcastDevReady, installGlobals } from "@remix-run/node";
installGlobals();
const app = express();
app.use(express.static("public", { immutable: true, maxAge: "1y" }));
- const BUILD_DIR = path.join(process.cwd(), "build");
- const build = require(BUILD_DIR);
+ const BUILD_PATH = url.pathToFileURL(path.join(process.cwd(), "build", "index.js"));
app.all(
"*",
createRequestHandler({
- build,
- mode: build.mode,
+ build: await import(BUILD_PATH),
+ mode: process.env.NODE_ENV,
})
);
let port = ${options.appPort};
- app.listen(port, () => {
- let build = require(BUILD_DIR);
+ app.listen(port, async () => {
+ let build = await import(BUILD_PATH);
console.log('✅ app ready: http://localhost:' + port);
if (process.env.NODE_ENV === 'development') {
broadcastDevReady(build);
@@ -79,7 +84,7 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
});
`,
- "postcss.config.js": js`
+ "postcss.config.cjs": js`
module.exports = {
plugins: {
"postcss-import": {}, // Testing PostCSS cache invalidation
@@ -90,7 +95,7 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({
"tailwind.config.js": js`
/** @type {import('tailwindcss').Config} */
- module.exports = {
+ export default {
content: ["./app/**/*.{ts,tsx,jsx,js}"],
theme: {
extend: {},
diff --git a/integration/hook-useSubmit-test.ts b/integration/hook-useSubmit-test.ts
index 180f8ecb2a1..7e220c8b1ee 100644
--- a/integration/hook-useSubmit-test.ts
+++ b/integration/hook-useSubmit-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("`useSubmit()` returned function", () => {
let fixture: Fixture;
diff --git a/integration/js-routes-test.ts b/integration/js-routes-test.ts
index 47ef5a33b51..13e7c5651ac 100644
--- a/integration/js-routes-test.ts
+++ b/integration/js-routes-test.ts
@@ -1,8 +1,8 @@
import { test } from "@playwright/test";
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
-import type { AppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
+import type { AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
test.describe(".js route files", () => {
let appFixture: AppFixture;
diff --git a/integration/layout-route-test.ts b/integration/layout-route-test.ts
index a4e971695d6..412dcb2de95 100644
--- a/integration/layout-route-test.ts
+++ b/integration/layout-route-test.ts
@@ -1,8 +1,8 @@
import { test } from "@playwright/test";
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
-import type { AppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
+import type { AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
test.describe("pathless layout routes", () => {
let appFixture: AppFixture;
diff --git a/integration/link-test.ts b/integration/link-test.ts
index 031b7aa1854..10d178627d4 100644
--- a/integration/link-test.ts
+++ b/integration/link-test.ts
@@ -5,9 +5,9 @@ import {
js,
createFixture,
createAppFixture,
-} 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";
const fakeGists = [
{
diff --git a/integration/loader-test.ts b/integration/loader-test.ts
index c99da1076c0..52f942db983 100644
--- a/integration/loader-test.ts
+++ b/integration/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";
test.describe("loader", () => {
let fixture: Fixture;
diff --git a/integration/matches-test.ts b/integration/matches-test.ts
index b682d371884..666d298ff55 100644
--- a/integration/matches-test.ts
+++ b/integration/matches-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("useMatches", () => {
let fixture: Fixture;
diff --git a/integration/mdx-test.ts b/integration/mdx-test.ts
index 57574652cff..22050a618cd 100644
--- a/integration/mdx-test.ts
+++ b/integration/mdx-test.ts
@@ -6,9 +6,9 @@ import {
js,
mdx,
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("mdx", () => {
let fixture: Fixture;
diff --git a/integration/meta-test.ts b/integration/meta-test.ts
index 9f8155ddec7..f0dfdda6be8 100644
--- a/integration/meta-test.ts
+++ b/integration/meta-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("meta", () => {
let fixture: Fixture;
diff --git a/integration/multiple-cookies-test.ts b/integration/multiple-cookies-test.ts
index 4f87a704efe..c35747c738c 100644
--- a/integration/multiple-cookies-test.ts
+++ b/integration/multiple-cookies-test.ts
@@ -1,8 +1,8 @@
import { test, expect } from "@playwright/test";
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
-import type { AppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
+import type { AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
test.describe("pathless layout routes", () => {
let appFixture: AppFixture;
diff --git a/integration/navigation-state-test.ts b/integration/navigation-state-test.ts
index 3c1d3d1d7f4..dee25f62ee3 100644
--- a/integration/navigation-state-test.ts
+++ b/integration/navigation-state-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";
const STATES = {
NORMAL_LOAD: "normal-load",
diff --git a/integration/package.json b/integration/package.json
new file mode 100644
index 00000000000..3dbc1ca591c
--- /dev/null
+++ b/integration/package.json
@@ -0,0 +1,3 @@
+{
+ "type": "module"
+}
diff --git a/integration/path-mapping-test.ts b/integration/path-mapping-test.ts
index 25e1615d503..a853bff6b75 100644
--- a/integration/path-mapping-test.ts
+++ b/integration/path-mapping-test.ts
@@ -1,7 +1,7 @@
import { test, expect } from "@playwright/test";
-import { createFixture, js, json, mdx } from "./helpers/create-fixture";
-import type { Fixture } from "./helpers/create-fixture";
+import { createFixture, js, json, mdx } from "./helpers/create-fixture.js";
+import type { Fixture } from "./helpers/create-fixture.js";
let fixture: Fixture;
diff --git a/integration/playwright-report/index.html b/integration/playwright-report/index.html
new file mode 100644
index 00000000000..0e2d6dbf2e8
--- /dev/null
+++ b/integration/playwright-report/index.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+ Playwright Test Report
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/integration/postcss-test.ts b/integration/postcss-test.ts
index 06ffb19ceab..2eb49cb1deb 100644
--- a/integration/postcss-test.ts
+++ b/integration/postcss-test.ts
@@ -1,14 +1,14 @@
import { test, expect } from "@playwright/test";
import type { Page } 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,
-} from "./helpers/create-fixture";
+} from "./helpers/create-fixture.js";
const TEST_PADDING_VALUE = "20px";
@@ -38,7 +38,7 @@ test.describe("PostCSS enabled", () => {
// "TEST_PADDING_VALUE" and "TEST_POSTCSS_CONTEXT".
// This lets us assert that the plugin is being run
// and that the correct context values are provided.
- "postcss.config.js": js`
+ "postcss.config.cjs": js`
module.exports = (ctx) => ({
plugins: [
{
@@ -59,7 +59,7 @@ test.describe("PostCSS enabled", () => {
});
`,
"tailwind.config.js": js`
- module.exports = {
+ export default {
content: ["./app/**/*.{ts,tsx,jsx,js}"],
theme: {
spacing: {
diff --git a/integration/prefetch-test.ts b/integration/prefetch-test.ts
index 5c8b4fb8e50..aaa45ac99f6 100644
--- a/integration/prefetch-test.ts
+++ b/integration/prefetch-test.ts
@@ -5,14 +5,14 @@ import {
createFixture,
js,
css,
-} from "./helpers/create-fixture";
+} from "./helpers/create-fixture.js";
import type {
Fixture,
FixtureInit,
AppFixture,
-} from "./helpers/create-fixture";
-import type { RemixLinkProps } from "../build/node_modules/@remix-run/react/dist/components";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+} from "./helpers/create-fixture.js";
+import type { RemixLinkProps } from "../build/node_modules/@remix-run/react/dist/components.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
// Generate the test app using the given prefetch mode
function fixtureFactory(mode: RemixLinkProps["prefetch"]): FixtureInit {
diff --git a/integration/redirects-test.ts b/integration/redirects-test.ts
index 03400d66fa1..66cf7d698d4 100644
--- a/integration/redirects-test.ts
+++ b/integration/redirects-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 } from "./helpers/playwright-fixture";
+import { createFixture, createAppFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
test.describe("redirects", () => {
let fixture: Fixture;
diff --git a/integration/rendering-test.ts b/integration/rendering-test.ts
index 00c83e4dbc2..6b00cecc00e 100644
--- a/integration/rendering-test.ts
+++ b/integration/rendering-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, selectHtml } from "./helpers/playwright-fixture";
+import { createAppFixture, createFixture, 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("rendering", () => {
let fixture: Fixture;
diff --git a/integration/request-test.ts b/integration/request-test.ts
index c212f86b982..b4219cb15a1 100644
--- a/integration/request-test.ts
+++ b/integration/request-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;
diff --git a/integration/resource-routes-test.ts b/integration/resource-routes-test.ts
index d95dc09f423..1fc65c28616 100644
--- a/integration/resource-routes-test.ts
+++ b/integration/resource-routes-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 { AppFixture, Fixture } 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 { AppFixture, Fixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
test.describe("loader in an app", async () => {
let appFixture: AppFixture;
diff --git a/integration/revalidate-test.ts b/integration/revalidate-test.ts
index 8e877ff8974..5c30bc504e0 100644
--- a/integration/revalidate-test.ts
+++ b/integration/revalidate-test.ts
@@ -1,8 +1,8 @@
import { test, expect } from "@playwright/test";
-import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
-import type { AppFixture } from "./helpers/create-fixture";
-import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js";
+import type { AppFixture } from "./helpers/create-fixture.js";
+import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
test.describe("Revalidation", () => {
let appFixture: AppFixture;
diff --git a/integration/root-route-test.ts b/integration/root-route-test.ts
index 4dd491aa6a2..645064b3ce6 100644
--- a/integration/root-route-test.ts
+++ b/integration/root-route-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("root route", () => {
let fixture: Fixture;
diff --git a/integration/route-collisions-test.ts b/integration/route-collisions-test.ts
index 38d16e9484e..52bc3c445da 100644
--- a/integration/route-collisions-test.ts
+++ b/integration/route-collisions-test.ts
@@ -1,7 +1,7 @@
import { PassThrough } from "node:stream";
import { test, expect } from "@playwright/test";
-import { createFixture, js } from "./helpers/create-fixture";
+import { createFixture, js } from "./helpers/create-fixture.js";
let ROOT_FILE_CONTENTS = js`
import { Outlet, Scripts } from "@remix-run/react";
diff --git a/integration/scroll-test.ts b/integration/scroll-test.ts
index dac45419452..68e5e0d7dcf 100644
--- a/integration/scroll-test.ts
+++ b/integration/scroll-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;
diff --git a/integration/server-code-in-browser-message-test.ts b/integration/server-code-in-browser-message-test.ts
index 9fbcf489d8c..f1445099089 100644
--- a/integration/server-code-in-browser-message-test.ts
+++ b/integration/server-code-in-browser-message-test.ts
@@ -5,9 +5,9 @@ import {
createFixture,
js,
json,
-} 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";
let fixture: Fixture;
let appFixture: AppFixture;
diff --git a/integration/server-entry-test.ts b/integration/server-entry-test.ts
index 2bc92cf1ec0..5d23a6acdcb 100644
--- a/integration/server-entry-test.ts
+++ b/integration/server-entry-test.ts
@@ -1,8 +1,8 @@
import { test, expect } from "@playwright/test";
-import { createFixture, js, json } from "./helpers/create-fixture";
-import type { Fixture } from "./helpers/create-fixture";
-import { selectHtml } from "./helpers/playwright-fixture";
+import { createFixture, js, json } from "./helpers/create-fixture.js";
+import type { Fixture } from "./helpers/create-fixture.js";
+import { selectHtml } from "./helpers/playwright-fixture.js";
test.describe("Custom Server Entry", () => {
let fixture: Fixture;
@@ -78,6 +78,7 @@ test.describe("Default Server Entry (React 17)", () => {
name: "remix-template-remix",
private: true,
sideEffects: false,
+ type: "module",
scripts: {
build:
"node ../../../build/node_modules/@remix-run/dev/dist/cli.js build",
diff --git a/integration/server-source-maps-test.ts b/integration/server-source-maps-test.ts
index 269c92296b3..b1cea1a50b4 100644
--- a/integration/server-source-maps-test.ts
+++ b/integration/server-source-maps-test.ts
@@ -2,8 +2,8 @@ import { test, expect } from "@playwright/test";
import path from "node:path";
import fsp from "node:fs/promises";
-import { createFixture, js } from "./helpers/create-fixture";
-import type { Fixture } from "./helpers/create-fixture";
+import { createFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture } from "./helpers/create-fixture.js";
let fixture: Fixture;
diff --git a/integration/set-cookie-revalidation-test.ts b/integration/set-cookie-revalidation-test.ts
index 113a913710a..d2a1c904285 100644
--- a/integration/set-cookie-revalidation-test.ts
+++ b/integration/set-cookie-revalidation-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;
diff --git a/integration/shared-route-imports-test.ts b/integration/shared-route-imports-test.ts
index 11bf415fd7b..38f43f1cf95 100644
--- a/integration/shared-route-imports-test.ts
+++ b/integration/shared-route-imports-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;
diff --git a/integration/splat-routes-test.ts b/integration/splat-routes-test.ts
index 9045536b042..c32355f4913 100644
--- a/integration/splat-routes-test.ts
+++ b/integration/splat-routes-test.ts
@@ -1,7 +1,7 @@
import { test, expect } from "@playwright/test";
-import { createFixture, js } from "./helpers/create-fixture";
-import type { Fixture } from "./helpers/create-fixture";
+import { createFixture, js } from "./helpers/create-fixture.js";
+import type { Fixture } from "./helpers/create-fixture.js";
test.describe("rendering", () => {
let fixture: Fixture;
diff --git a/integration/svg-in-node-modules-test.ts b/integration/svg-in-node-modules-test.ts
index 96e604c02b8..4813a43b1cc 100644
--- a/integration/svg-in-node-modules-test.ts
+++ b/integration/svg-in-node-modules-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;
diff --git a/integration/tailwind-test.ts b/integration/tailwind-test.ts
index b898e7e0708..5b89fd140f1 100644
--- a/integration/tailwind-test.ts
+++ b/integration/tailwind-test.ts
@@ -1,13 +1,13 @@
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,
-} from "./helpers/create-fixture";
+} from "./helpers/create-fixture.js";
const TEST_PADDING_VALUE = "20px";
@@ -19,7 +19,7 @@ function runTests(ext: typeof extensions[number]) {
let tailwindConfigName = `tailwind.config.${ext}`;
- let tailwindConfig = ["mjs", "ts"].includes(ext)
+ let tailwindConfig = ["mjs", "ts", "js"].includes(ext)
? js`
export default {
content: ["./app/**/*.{ts,tsx,jsx,js}"],
diff --git a/integration/transition-test.ts b/integration/transition-test.ts
index cec10f75a48..bfc87abd193 100644
--- a/integration/transition-test.ts
+++ b/integration/transition-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("rendering", () => {
let fixture: Fixture;
diff --git a/integration/tsconfig.json b/integration/tsconfig.json
index d2215944147..12289eca96e 100644
--- a/integration/tsconfig.json
+++ b/integration/tsconfig.json
@@ -3,11 +3,11 @@
"exclude": ["helpers/*-template"],
"compilerOptions": {
"lib": ["ES2019", "DOM", "DOM.Iterable"],
- "target": "ES2019",
- "module": "CommonJS",
+ "target": "ES2020",
+ "module": "ES2020",
"skipLibCheck": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"resolveJsonModule": true,
diff --git a/integration/upload-test.ts b/integration/upload-test.ts
index 9819faf2bf6..1dc8df830e0 100644
--- a/integration/upload-test.ts
+++ b/integration/upload-test.ts
@@ -1,17 +1,22 @@
import * as path from "node:path";
+import * as url from "node:url";
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;
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+
test.beforeAll(async () => {
fixture = await createFixture({
files: {
"app/routes/file-upload-handler.tsx": js`
+ import * as path from "node:path";
+ import * as url from "node:url";
import {
json,
unstable_composeUploadHandlers as composeUploadHandlers,
@@ -22,10 +27,11 @@ test.beforeAll(async () => {
} from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";
+ const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
export let action = async ({ request }) => {
let uploadHandler = composeUploadHandlers(
createFileUploadHandler({
- directory: "./uploads",
+ directory: path.resolve(__dirname, "..", "uploads"),
maxPartSize: 13,
avoidFileConflicts: false,
file: ({ filename }) => filename,
diff --git a/integration/vanilla-extract-test.ts b/integration/vanilla-extract-test.ts
index cb3aa875de8..c9fee0e2829 100644
--- a/integration/vanilla-extract-test.ts
+++ b/integration/vanilla-extract-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";
const TEST_PADDING_VALUE = "20px";
diff --git a/package.json b/package.json
index 7cdc3eb55af..99cbd738728 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,7 @@
"babel-jest": "^27.5.1",
"babel-plugin-transform-remove-console": "^6.9.4",
"chalk": "^4.1.2",
- "cheerio": "^1.0.0-rc.3",
+ "cheerio": "^1.0.0-rc.12",
"concurrently": "^7.0.0",
"cross-env": "^7.0.3",
"cross-spawn": "^7.0.3",
diff --git a/packages/create-remix/__tests__/fixtures/stack/tsconfig.json b/packages/create-remix/__tests__/fixtures/stack/tsconfig.json
index 7d43861a8fa..9832df75f30 100644
--- a/packages/create-remix/__tests__/fixtures/stack/tsconfig.json
+++ b/packages/create-remix/__tests__/fixtures/stack/tsconfig.json
@@ -7,7 +7,7 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/packages/create-remix/tsconfig.json b/packages/create-remix/tsconfig.json
index 8f869b8dd8e..9a8eabe78b9 100644
--- a/packages/create-remix/tsconfig.json
+++ b/packages/create-remix/tsconfig.json
@@ -4,11 +4,11 @@
"compilerOptions": {
"lib": ["ES2019", "DOM", "DOM.Iterable"],
"target": "ES2019",
- "module": "CommonJS",
+ "module": "ES2020",
"skipLibCheck": true,
"composite": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"resolveJsonModule": true,
diff --git a/packages/remix-architect/tsconfig.json b/packages/remix-architect/tsconfig.json
index 074b2c8bb27..a18c6352e42 100644
--- a/packages/remix-architect/tsconfig.json
+++ b/packages/remix-architect/tsconfig.json
@@ -7,7 +7,7 @@
"skipLibCheck": true,
"composite": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true,
diff --git a/packages/remix-cloudflare-pages/tsconfig.json b/packages/remix-cloudflare-pages/tsconfig.json
index f6abde1fbc6..b6e7f3fa48f 100644
--- a/packages/remix-cloudflare-pages/tsconfig.json
+++ b/packages/remix-cloudflare-pages/tsconfig.json
@@ -7,7 +7,7 @@
"types": ["@cloudflare/workers-types"],
"composite": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true,
diff --git a/packages/remix-cloudflare-workers/tsconfig.json b/packages/remix-cloudflare-workers/tsconfig.json
index 5b6cbf4036f..011d32be79c 100644
--- a/packages/remix-cloudflare-workers/tsconfig.json
+++ b/packages/remix-cloudflare-workers/tsconfig.json
@@ -7,7 +7,7 @@
"types": ["@cloudflare/workers-types"],
"composite": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true,
diff --git a/packages/remix-cloudflare/tsconfig.json b/packages/remix-cloudflare/tsconfig.json
index 2301e611398..dba01de4d94 100644
--- a/packages/remix-cloudflare/tsconfig.json
+++ b/packages/remix-cloudflare/tsconfig.json
@@ -7,7 +7,7 @@
"types": ["@cloudflare/workers-types"],
"composite": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true,
diff --git a/packages/remix-css-bundle/tsconfig.json b/packages/remix-css-bundle/tsconfig.json
index 908cd884dcf..752ddb528fe 100644
--- a/packages/remix-css-bundle/tsconfig.json
+++ b/packages/remix-css-bundle/tsconfig.json
@@ -4,8 +4,8 @@
"compilerOptions": {
"lib": ["ES2019", "DOM.Iterable"],
"target": "ES2019",
- "module": "CommonJS",
- "moduleResolution": "node",
+ "module": "ES2020",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true,
diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/tsconfig.json b/packages/remix-dev/__tests__/fixtures/cloudflare/tsconfig.json
index 20f8a386a6c..29ed4ae9962 100644
--- a/packages/remix-dev/__tests__/fixtures/cloudflare/tsconfig.json
+++ b/packages/remix-dev/__tests__/fixtures/cloudflare/tsconfig.json
@@ -5,7 +5,7 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/packages/remix-dev/__tests__/fixtures/indie-stack/tsconfig.json b/packages/remix-dev/__tests__/fixtures/indie-stack/tsconfig.json
index 9bacef832d1..54b8eef4435 100644
--- a/packages/remix-dev/__tests__/fixtures/indie-stack/tsconfig.json
+++ b/packages/remix-dev/__tests__/fixtures/indie-stack/tsconfig.json
@@ -7,8 +7,8 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "module": "CommonJS",
- "moduleResolution": "node",
+ "module": "ES2020",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/packages/remix-dev/__tests__/fixtures/node/tsconfig.json b/packages/remix-dev/__tests__/fixtures/node/tsconfig.json
index 20f8a386a6c..29ed4ae9962 100644
--- a/packages/remix-dev/__tests__/fixtures/node/tsconfig.json
+++ b/packages/remix-dev/__tests__/fixtures/node/tsconfig.json
@@ -5,7 +5,7 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/packages/remix-dev/__tests__/fixtures/stack/tsconfig.json b/packages/remix-dev/__tests__/fixtures/stack/tsconfig.json
index 7d43861a8fa..9832df75f30 100644
--- a/packages/remix-dev/__tests__/fixtures/stack/tsconfig.json
+++ b/packages/remix-dev/__tests__/fixtures/stack/tsconfig.json
@@ -7,7 +7,7 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/packages/remix-dev/__tests__/init-test.ts b/packages/remix-dev/__tests__/init-test.ts
index 1c9940ac1b5..4a65e069015 100644
--- a/packages/remix-dev/__tests__/init-test.ts
+++ b/packages/remix-dev/__tests__/init-test.ts
@@ -1,6 +1,6 @@
import * as os from "node:os";
import * as path from "node:path";
-import * as fse from "fs-extra";
+import fse from "fs-extra";
import stripAnsi from "strip-ansi";
import { run } from "../cli/run";
diff --git a/packages/remix-dev/__tests__/readConfig-test.ts b/packages/remix-dev/__tests__/readConfig-test.ts
index de6d48af4a0..7c795e0e9c0 100644
--- a/packages/remix-dev/__tests__/readConfig-test.ts
+++ b/packages/remix-dev/__tests__/readConfig-test.ts
@@ -54,12 +54,12 @@ describe("readConfig", () => {
"serverDependenciesToBundle": Array [],
"serverEntryPoint": undefined,
"serverMainFields": Array [
- "main",
"module",
+ "main",
],
"serverMinify": false,
"serverMode": "production",
- "serverModuleFormat": "cjs",
+ "serverModuleFormat": "esm",
"serverNodeBuiltinsPolyfill": undefined,
"serverPlatform": "node",
"tailwind": true,
diff --git a/packages/remix-dev/cli/commands.ts b/packages/remix-dev/cli/commands.ts
index 20d937a1831..893b5c6e3ec 100644
--- a/packages/remix-dev/cli/commands.ts
+++ b/packages/remix-dev/cli/commands.ts
@@ -1,6 +1,6 @@
import * as path from "node:path";
import { execSync } from "node:child_process";
-import * as fse from "fs-extra";
+import fse from "fs-extra";
import getPort, { makeRange } from "get-port";
import prettyMs from "pretty-ms";
import NPMCliPackageJson from "@npmcli/package-json";
diff --git a/packages/remix-dev/compiler/css/bundle.ts b/packages/remix-dev/compiler/css/bundle.ts
index ec31537c9aa..cc239d3fbf5 100644
--- a/packages/remix-dev/compiler/css/bundle.ts
+++ b/packages/remix-dev/compiler/css/bundle.ts
@@ -1,5 +1,5 @@
import * as path from "node:path";
-import * as fse from "fs-extra";
+import fse from "fs-extra";
import type * as esbuild from "esbuild";
import postcss from "postcss";
import postcssDiscardDuplicates from "postcss-discard-duplicates";
diff --git a/packages/remix-dev/compiler/plugins/cssImports.ts b/packages/remix-dev/compiler/plugins/cssImports.ts
index c72c196bc41..e2a04a556a7 100644
--- a/packages/remix-dev/compiler/plugins/cssImports.ts
+++ b/packages/remix-dev/compiler/plugins/cssImports.ts
@@ -1,5 +1,5 @@
import * as path from "node:path";
-import * as fse from "fs-extra";
+import fse from "fs-extra";
import esbuild from "esbuild";
import invariant from "../../invariant";
diff --git a/packages/remix-dev/compiler/server/plugins/routes.ts b/packages/remix-dev/compiler/server/plugins/routes.ts
index b53d2fcafed..d843acbf092 100644
--- a/packages/remix-dev/compiler/server/plugins/routes.ts
+++ b/packages/remix-dev/compiler/server/plugins/routes.ts
@@ -1,5 +1,5 @@
import * as path from "node:path";
-import * as fse from "fs-extra";
+import fse from "fs-extra";
import type esbuild from "esbuild";
import { getLoaderForFile } from "../../utils/loaders";
diff --git a/packages/remix-dev/compiler/server/write.ts b/packages/remix-dev/compiler/server/write.ts
index 674a5cc23c1..948d1a0b5a4 100644
--- a/packages/remix-dev/compiler/server/write.ts
+++ b/packages/remix-dev/compiler/server/write.ts
@@ -1,6 +1,6 @@
import * as path from "node:path";
import type * as esbuild from "esbuild";
-import * as fse from "fs-extra";
+import fse from "fs-extra";
import type { RemixConfig } from "../../config";
diff --git a/packages/remix-dev/compiler/utils/postcss.ts b/packages/remix-dev/compiler/utils/postcss.ts
index 0d5363fec3c..0e845dff25c 100644
--- a/packages/remix-dev/compiler/utils/postcss.ts
+++ b/packages/remix-dev/compiler/utils/postcss.ts
@@ -1,6 +1,6 @@
import path from "node:path";
import { pathToFileURL } from "node:url";
-import * as fse from "fs-extra";
+import fse from "fs-extra";
import loadConfig from "postcss-load-config";
import type { AcceptedPlugin, Message, Processor } from "postcss";
import postcss from "postcss";
diff --git a/packages/remix-dev/config.ts b/packages/remix-dev/config.ts
index 60a7bc8e30e..5b8735d0934 100644
--- a/packages/remix-dev/config.ts
+++ b/packages/remix-dev/config.ts
@@ -100,7 +100,7 @@ export interface AppConfig {
mdx?: RemixMdxConfig | RemixMdxConfigFunction;
/**
- * Whether to process CSS using PostCSS if `postcss.config.js` is present.
+ * Whether to process CSS using PostCSS if a PostCSS config file is present.
* Defaults to `true`.
*/
postcss?: boolean;
@@ -266,7 +266,7 @@ export interface RemixConfig {
mdx?: RemixMdxConfig | RemixMdxConfigFunction;
/**
- * Whether to process CSS using PostCSS if `postcss.config.js` is present.
+ * Whether to process CSS using PostCSS if a PostCSS config file is present.
* Defaults to `true`.
*/
postcss: boolean;
@@ -411,11 +411,7 @@ export async function readConfig(
let serverMainFields = appConfig.serverMainFields;
let serverMinify = appConfig.serverMinify;
- if (!appConfig.serverModuleFormat) {
- serverModuleFormatWarning();
- }
-
- let serverModuleFormat = appConfig.serverModuleFormat || "cjs";
+ let serverModuleFormat = appConfig.serverModuleFormat || "esm";
let serverPlatform = appConfig.serverPlatform || "node";
serverMainFields ??=
serverModuleFormat === "esm" ? ["module", "main"] : ["main", "module"];
@@ -764,14 +760,3 @@ let devServerBroadcastDelayWarning = () =>
key: "devServerBroadcastDelayWarning",
}
);
-
-let serverModuleFormatWarning = () =>
- logger.warn("The default server module format is changing in v2", {
- details: [
- "The default format will change from `cjs` to `esm`.",
- "You can keep using `cjs` by explicitly specifying `serverModuleFormat: 'cjs'`.",
- "You can opt-in early to this change by explicitly specifying `serverModuleFormat: 'esm'`",
- "-> https://remix.run/docs/en/v1.16.0/pages/v2#servermoduleformat",
- ],
- key: "serverModuleFormatWarning",
- });
diff --git a/packages/remix-dev/devServer_unstable/env.ts b/packages/remix-dev/devServer_unstable/env.ts
index ad83ae94047..d41c6449897 100644
--- a/packages/remix-dev/devServer_unstable/env.ts
+++ b/packages/remix-dev/devServer_unstable/env.ts
@@ -1,4 +1,4 @@
-import * as fse from "fs-extra";
+import fse from "fs-extra";
import * as path from "node:path";
// Import environment variables from: .env, failing gracefully if it doesn't exist
diff --git a/packages/remix-dev/modules.ts b/packages/remix-dev/modules.ts
index a7b6225ec58..92f319b238a 100644
--- a/packages/remix-dev/modules.ts
+++ b/packages/remix-dev/modules.ts
@@ -1,3 +1,5 @@
+// @ts-nocheck
+
declare module "*.aac" {
let asset: string;
export default asset;
diff --git a/packages/remix-dev/tsconfig.json b/packages/remix-dev/tsconfig.json
index a8ffaad7e25..8dbb4441b86 100644
--- a/packages/remix-dev/tsconfig.json
+++ b/packages/remix-dev/tsconfig.json
@@ -4,10 +4,10 @@
"compilerOptions": {
"lib": ["ES2019", "DOM.Iterable"],
"target": "ES2019",
- "module": "CommonJS",
+ "module": "ES2020",
"composite": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"strict": true,
diff --git a/packages/remix-express/tsconfig.json b/packages/remix-express/tsconfig.json
index 5cdf6f7db04..9b99ce6b9ae 100644
--- a/packages/remix-express/tsconfig.json
+++ b/packages/remix-express/tsconfig.json
@@ -7,13 +7,12 @@
"skipLibCheck": true,
"composite": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true,
"emitDeclarationOnly": true,
"rootDir": ".",
- "outDir": "../../build/node_modules/@remix-run/express/dist",
- "composite": true
+ "outDir": "../../build/node_modules/@remix-run/express/dist"
}
}
diff --git a/packages/remix-node/fetch.ts b/packages/remix-node/fetch.ts
index 1047e998ab4..98d9b24dd9f 100644
--- a/packages/remix-node/fetch.ts
+++ b/packages/remix-node/fetch.ts
@@ -6,6 +6,7 @@ import {
Response as WebResponse,
} from "@remix-run/web-fetch";
export { FormData } from "@remix-run/web-fetch";
+// @ts-ignore
export { File, Blob } from "@remix-run/web-file";
type NodeHeadersInit = ConstructorParameters[0];
diff --git a/packages/remix-node/tsconfig.json b/packages/remix-node/tsconfig.json
index ab2ee15a642..51a81b89dbc 100644
--- a/packages/remix-node/tsconfig.json
+++ b/packages/remix-node/tsconfig.json
@@ -4,9 +4,10 @@
"compilerOptions": {
"lib": ["ES2019", "DOM.Iterable"],
"target": "ES2019",
+ "module": "ES2020",
"composite": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true,
diff --git a/packages/remix-react/tsconfig.json b/packages/remix-react/tsconfig.json
index a1ecab802aa..5d65dbae644 100644
--- a/packages/remix-react/tsconfig.json
+++ b/packages/remix-react/tsconfig.json
@@ -8,7 +8,7 @@
"skipLibCheck": true,
"composite": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"jsx": "react",
diff --git a/packages/remix-serve/index.ts b/packages/remix-serve/index.ts
index ffa9a1e10a9..e92954b3ede 100644
--- a/packages/remix-serve/index.ts
+++ b/packages/remix-serve/index.ts
@@ -23,16 +23,20 @@ export function createApp(
app.use(express.static("public", { maxAge: "1h" }));
app.use(morgan("tiny"));
- app.all(
- "*",
- mode === "production"
- ? createRequestHandler({ build: require(buildPath), mode })
- : (req, res, next) => {
- // require cache is purged in @remix-run/dev where the file watcher is
- let build = require(buildPath);
- return createRequestHandler({ build, mode })(req, res, next);
- }
- );
+
+ let requestHandler: ReturnType | undefined;
+ app.all("*", async (req, res, next) => {
+ try {
+ if (!requestHandler) {
+ let build = await import(buildPath);
+ requestHandler = createRequestHandler({ build, mode });
+ }
+
+ return await requestHandler(req, res, next);
+ } catch (error) {
+ next(error);
+ }
+ });
return app;
}
diff --git a/packages/remix-serve/tsconfig.json b/packages/remix-serve/tsconfig.json
index e514098ca1e..22426018f14 100644
--- a/packages/remix-serve/tsconfig.json
+++ b/packages/remix-serve/tsconfig.json
@@ -2,12 +2,13 @@
"include": ["**/*.ts"],
"exclude": ["dist", "__tests__", "node_modules"],
"compilerOptions": {
- "lib": ["ES2019", "DOM.Iterable"],
- "target": "ES2019",
+ "lib": ["ES2020", "DOM.Iterable"],
+ "target": "ES2020",
+ "module": "ES2020",
"skipLibCheck": true,
"composite": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true,
diff --git a/packages/remix-server-runtime/formData.ts b/packages/remix-server-runtime/formData.ts
index 5e1baef2d54..710cec273d2 100644
--- a/packages/remix-server-runtime/formData.ts
+++ b/packages/remix-server-runtime/formData.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
import { streamMultipart } from "@web3-storage/multipart-parser";
export type UploadHandlerPart = {
diff --git a/packages/remix-server-runtime/tsconfig.json b/packages/remix-server-runtime/tsconfig.json
index 5aef6936c4f..362d9cc3921 100644
--- a/packages/remix-server-runtime/tsconfig.json
+++ b/packages/remix-server-runtime/tsconfig.json
@@ -6,7 +6,7 @@
"target": "ES2019",
"composite": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true,
diff --git a/packages/remix-testing/tsconfig.json b/packages/remix-testing/tsconfig.json
index 9ba9ed88b4e..fbfda3ce6bb 100644
--- a/packages/remix-testing/tsconfig.json
+++ b/packages/remix-testing/tsconfig.json
@@ -8,7 +8,7 @@
"skipLibCheck": true,
"composite": true,
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"jsx": "react",
diff --git a/packages/remix/tsconfig.json b/packages/remix/tsconfig.json
index 15a16ae32eb..9cbc5f12267 100644
--- a/packages/remix/tsconfig.json
+++ b/packages/remix/tsconfig.json
@@ -9,7 +9,7 @@
"composite": true,
"jsx": "react",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true,
diff --git a/scripts/deployment-test/cypress/tsconfig.json b/scripts/deployment-test/cypress/tsconfig.json
index f48fbd0af9d..a9410e7f66f 100644
--- a/scripts/deployment-test/cypress/tsconfig.json
+++ b/scripts/deployment-test/cypress/tsconfig.json
@@ -17,7 +17,7 @@
"types": ["node", "cypress", "@testing-library/cypress"],
"esModuleInterop": true,
"jsx": "react",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"target": "es2019",
"strict": true,
"skipLibCheck": true,
diff --git a/scripts/playground/template/tsconfig.json b/scripts/playground/template/tsconfig.json
index f7e2a5f4bf1..81d84527115 100644
--- a/scripts/playground/template/tsconfig.json
+++ b/scripts/playground/template/tsconfig.json
@@ -7,8 +7,8 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "module": "CommonJS",
- "moduleResolution": "node",
+ "module": "ES2020",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
index 211eeb2764d..22ec8459977 100644
--- a/scripts/tsconfig.json
+++ b/scripts/tsconfig.json
@@ -7,7 +7,7 @@
"checkJs": true,
"forceConsistentCasingInFileNames": true,
"allowSyntheticDefaultImports": true,
- "moduleResolution": "Node",
+ "moduleResolution": "Bundler",
"module": "ESNext",
"noEmit": true,
"strict": true,
diff --git a/templates/arc/tsconfig.json b/templates/arc/tsconfig.json
index 20f8a386a6c..29ed4ae9962 100644
--- a/templates/arc/tsconfig.json
+++ b/templates/arc/tsconfig.json
@@ -5,7 +5,7 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/templates/cloudflare-pages/tsconfig.json b/templates/cloudflare-pages/tsconfig.json
index 20f8a386a6c..29ed4ae9962 100644
--- a/templates/cloudflare-pages/tsconfig.json
+++ b/templates/cloudflare-pages/tsconfig.json
@@ -5,7 +5,7 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/templates/cloudflare-workers/tsconfig.json b/templates/cloudflare-workers/tsconfig.json
index 20f8a386a6c..29ed4ae9962 100644
--- a/templates/cloudflare-workers/tsconfig.json
+++ b/templates/cloudflare-workers/tsconfig.json
@@ -5,7 +5,7 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/templates/express/server.js b/templates/express/server.js
index 75fa7d7579b..c3da29916d4 100644
--- a/templates/express/server.js
+++ b/templates/express/server.js
@@ -1,4 +1,6 @@
import * as fs from "node:fs";
+import * as path from "node:path";
+import * as url from "node:url";
import { createRequestHandler } from "@remix-run/express";
import { broadcastDevReady, installGlobals } from "@remix-run/node";
@@ -11,7 +13,9 @@ import sourceMapSupport from "source-map-support";
sourceMapSupport.install();
installGlobals();
-const BUILD_PATH = "./build/index.js";
+const BUILD_PATH = url.pathToFileURL(
+ path.join(process.cwd(), "build", "index.js")
+);
/**
* @type { import('@remix-run/node').ServerBuild | Promise }
*/
diff --git a/templates/express/tsconfig.json b/templates/express/tsconfig.json
index 20f8a386a6c..29ed4ae9962 100644
--- a/templates/express/tsconfig.json
+++ b/templates/express/tsconfig.json
@@ -5,7 +5,7 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/templates/fly/tsconfig.json b/templates/fly/tsconfig.json
index 20f8a386a6c..29ed4ae9962 100644
--- a/templates/fly/tsconfig.json
+++ b/templates/fly/tsconfig.json
@@ -5,7 +5,7 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/templates/remix/tsconfig.json b/templates/remix/tsconfig.json
index 20f8a386a6c..29ed4ae9962 100644
--- a/templates/remix/tsconfig.json
+++ b/templates/remix/tsconfig.json
@@ -5,7 +5,7 @@
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
- "moduleResolution": "node",
+ "moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2019",
"strict": true,
diff --git a/yarn.lock b/yarn.lock
index 625ff20f6d1..890b611d7dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4035,29 +4035,30 @@ check-more-types@^2.24.0:
resolved "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz"
integrity sha1-FCD/sQ/URNz8ebQ4kbv//TKoRgA=
-cheerio-select@^1.5.0:
- version "1.5.0"
- resolved "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.5.0.tgz"
- integrity sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==
+cheerio-select@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz#4d8673286b8126ca2a8e42740d5e3c4884ae21b4"
+ integrity sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==
dependencies:
- css-select "^4.1.3"
- css-what "^5.0.1"
- domelementtype "^2.2.0"
- domhandler "^4.2.0"
- domutils "^2.7.0"
-
-cheerio@^1.0.0-rc.3:
- version "1.0.0-rc.10"
- resolved "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz"
- integrity sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==
- dependencies:
- cheerio-select "^1.5.0"
- dom-serializer "^1.3.2"
- domhandler "^4.2.0"
- htmlparser2 "^6.1.0"
- parse5 "^6.0.1"
- parse5-htmlparser2-tree-adapter "^6.0.1"
- tslib "^2.2.0"
+ boolbase "^1.0.0"
+ css-select "^5.1.0"
+ css-what "^6.1.0"
+ domelementtype "^2.3.0"
+ domhandler "^5.0.3"
+ domutils "^3.0.1"
+
+cheerio@^1.0.0-rc.12:
+ version "1.0.0-rc.12"
+ resolved "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz#788bf7466506b1c6bf5fae51d24a2c4d62e47683"
+ integrity sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==
+ dependencies:
+ cheerio-select "^2.1.0"
+ dom-serializer "^2.0.0"
+ domhandler "^5.0.3"
+ domutils "^3.0.1"
+ htmlparser2 "^8.0.1"
+ parse5 "^7.0.0"
+ parse5-htmlparser2-tree-adapter "^7.0.0"
choices-separator@^2.0.0:
version "2.0.0"
@@ -4425,22 +4426,27 @@ csrf@^3.1.0:
tsscmp "1.0.6"
uid-safe "2.1.5"
-css-select@^4.1.3:
- version "4.1.3"
- resolved "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz"
- integrity sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==
+css-select@^5.1.0:
+ version "5.1.0"
+ resolved "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+ integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
dependencies:
boolbase "^1.0.0"
- css-what "^5.0.0"
- domhandler "^4.2.0"
- domutils "^2.6.0"
- nth-check "^2.0.0"
+ css-what "^6.1.0"
+ domhandler "^5.0.2"
+ domutils "^3.0.1"
+ nth-check "^2.0.1"
-css-what@^5.0.0, css-what@^5.0.1:
+css-what@^5.0.1:
version "5.0.1"
resolved "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz"
integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
+css-what@^6.1.0:
+ version "6.1.0"
+ resolved "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+ integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
css.escape@^1.5.1:
version "1.5.1"
resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz"
@@ -4826,19 +4832,19 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.10.tgz"
integrity sha512-Xu9mD0UjrJisTmv7lmVSDMagQcU9R5hwAbxsaAE/35XPnPLJobbuREfV/rraiSaEj/UOvgrzQs66zyTWTlyd+g==
-dom-serializer@^1.0.1, dom-serializer@^1.3.2:
- version "1.3.2"
- resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz"
- integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+dom-serializer@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+ integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
dependencies:
- domelementtype "^2.0.1"
- domhandler "^4.2.0"
- entities "^2.0.0"
+ domelementtype "^2.3.0"
+ domhandler "^5.0.2"
+ entities "^4.2.0"
-domelementtype@^2.0.1, domelementtype@^2.2.0:
- version "2.2.0"
- resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz"
- integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+domelementtype@^2.3.0:
+ version "2.3.0"
+ resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+ integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
domexception@^2.0.1:
version "2.0.1"
@@ -4847,21 +4853,21 @@ domexception@^2.0.1:
dependencies:
webidl-conversions "^5.0.0"
-domhandler@^4.0.0, domhandler@^4.2.0:
- version "4.2.2"
- resolved "https://registry.npmjs.org/domhandler/-/domhandler-4.2.2.tgz"
- integrity sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==
+domhandler@^5.0.2, domhandler@^5.0.3:
+ version "5.0.3"
+ resolved "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+ integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
dependencies:
- domelementtype "^2.2.0"
+ domelementtype "^2.3.0"
-domutils@^2.5.2, domutils@^2.6.0, domutils@^2.7.0:
- version "2.8.0"
- resolved "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz"
- integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+domutils@^3.0.1:
+ version "3.1.0"
+ resolved "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+ integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
dependencies:
- dom-serializer "^1.0.1"
- domelementtype "^2.2.0"
- domhandler "^4.2.0"
+ dom-serializer "^2.0.0"
+ domelementtype "^2.3.0"
+ domhandler "^5.0.3"
dotenv-json@^1.0.0:
version "1.0.0"
@@ -4953,10 +4959,10 @@ enquirer@^2.3.0, enquirer@^2.3.6:
dependencies:
ansi-colors "^4.1.1"
-entities@^2.0.0:
- version "2.2.0"
- resolved "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz"
- integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+entities@^4.2.0, entities@^4.4.0:
+ version "4.5.0"
+ resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+ integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
error-ex@^1.3.1:
version "1.3.2"
@@ -5920,9 +5926,9 @@ fs-constants@^1.0.0:
integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
fs-extra@^10.0.0:
- version "10.0.0"
- resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz"
- integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
+ version "10.1.0"
+ resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+ integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
dependencies:
graceful-fs "^4.2.0"
jsonfile "^6.0.1"
@@ -6384,15 +6390,15 @@ html-escaper@^2.0.0:
resolved "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz"
integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
-htmlparser2@^6.1.0:
- version "6.1.0"
- resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz"
- integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+htmlparser2@^8.0.1:
+ version "8.0.2"
+ resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
+ integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
dependencies:
- domelementtype "^2.0.1"
- domhandler "^4.0.0"
- domutils "^2.5.2"
- entities "^2.0.0"
+ domelementtype "^2.3.0"
+ domhandler "^5.0.3"
+ domutils "^3.0.1"
+ entities "^4.4.0"
http-errors@1.8.1:
version "1.8.1"
@@ -9061,10 +9067,10 @@ npm-run-path@^4.0.0, npm-run-path@^4.0.1:
dependencies:
path-key "^3.0.0"
-nth-check@^2.0.0:
- version "2.0.1"
- resolved "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz"
- integrity sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==
+nth-check@^2.0.1:
+ version "2.1.1"
+ resolved "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+ integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
dependencies:
boolbase "^1.0.0"
@@ -9410,18 +9416,26 @@ parse-ms@^2.1.0:
resolved "https://registry.npmjs.org/parse-ms/-/parse-ms-2.1.0.tgz"
integrity sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==
-parse5-htmlparser2-tree-adapter@^6.0.1:
- version "6.0.1"
- resolved "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz"
- integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
+parse5-htmlparser2-tree-adapter@^7.0.0:
+ version "7.0.0"
+ resolved "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz#23c2cc233bcf09bb7beba8b8a69d46b08c62c2f1"
+ integrity sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==
dependencies:
- parse5 "^6.0.1"
+ domhandler "^5.0.2"
+ parse5 "^7.0.0"
-parse5@6.0.1, parse5@^6.0.1:
+parse5@6.0.1:
version "6.0.1"
resolved "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz"
integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
+parse5@^7.0.0:
+ version "7.1.2"
+ resolved "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
+ integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
+ dependencies:
+ entities "^4.4.0"
+
parseurl@^1.3.3, parseurl@~1.3.3:
version "1.3.3"
resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz"
@@ -11503,7 +11517,17 @@ tslib@^1.8.1, tslib@^1.9.0:
resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-tslib@^2.0.1, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.4.0, tslib@^2.5.0:
+tslib@^2.0.1, tslib@^2.1.0:
+ version "2.3.1"
+ resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz"
+ integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
+tslib@^2.4.0:
+ version "2.4.0"
+ resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
+ integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
+tslib@^2.5.0:
version "2.5.0"
resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==