From b037937401f5cd44ed3454c1eb27c9cc692f356f Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Mon, 24 Jul 2023 13:43:00 -0700 Subject: [PATCH 01/18] feat!: default to serverModuleFormat esm feat: update remix-serve to use dynamic import to support esm and cjs --- .changeset/v2-default-to-esm.md | 6 ++++++ packages/remix-dev/config.ts | 17 +---------------- packages/remix-serve/index.ts | 24 ++++++++++++++---------- packages/remix-serve/tsconfig.json | 5 +++-- 4 files changed, 24 insertions(+), 28 deletions(-) create mode 100644 .changeset/v2-default-to-esm.md 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/packages/remix-dev/config.ts b/packages/remix-dev/config.ts index 25d71be4f74..ccf53f1c342 100644 --- a/packages/remix-dev/config.ts +++ b/packages/remix-dev/config.ts @@ -425,11 +425,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"]; @@ -767,17 +763,6 @@ let disjunctionListFormat = new Intl.ListFormat("en", { type: "disjunction", }); -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", - }); - let futureFlagWarning = (args: { message: string; flag: string; link: string }) => () => { logger.warn(args.message, { 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..78f08fa6185 100644 --- a/packages/remix-serve/tsconfig.json +++ b/packages/remix-serve/tsconfig.json @@ -2,8 +2,9 @@ "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, From 425262a53cc6150e8efe74ffba3e004a94ea9bdd Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Tue, 25 Jul 2023 13:34:43 -0700 Subject: [PATCH 02/18] feat: move integration tests to ESM --- integration/abort-signal-test.ts | 6 +- integration/action-test.ts | 6 +- integration/browser-entry-test.ts | 6 +- integration/bug-report-test.ts | 6 +- integration/catch-boundary-data-test.ts | 6 +- integration/catch-boundary-test.ts | 6 +- integration/cf-compiler-test.ts | 3 +- integration/compiler-mjs-output-test.ts | 2 +- integration/compiler-test.ts | 18 +- integration/conventional-routes-test.ts | 6 +- integration/css-modules-test.ts | 6 +- integration/css-side-effect-imports-test.ts | 11 +- integration/custom-entry-server-test.ts | 6 +- integration/defer-loader-test.ts | 6 +- integration/defer-test.ts | 6 +- integration/deno-compiler-test.ts | 5 +- .../deterministic-build-output-test.ts | 6 +- integration/error-boundary-test.ts | 8 +- integration/error-boundary-v2-test.ts | 8 +- integration/error-data-request-test.ts | 4 +- integration/error-sanitization-test.ts | 8 +- integration/fetcher-layout-test.ts | 6 +- integration/fetcher-test.ts | 6 +- integration/file-uploads-test.ts | 7 +- integration/flat-routes-test.ts | 8 +- integration/form-data-test.ts | 4 +- integration/form-test.ts | 6 +- integration/headers-test.ts | 6 +- integration/helpers/cf-template/package.json | 1 + .../helpers/cf-template/remix.config.js | 2 +- integration/helpers/create-fixture.ts | 20 +- .../helpers/deno-template/package.json | 1 + .../helpers/deno-template/remix.config.js | 2 +- .../helpers/node-template/package.json | 1 + .../helpers/node-template/remix.config.js | 2 +- integration/helpers/playwright-fixture.ts | 2 +- integration/hmr-log-test.ts | 22 +-- integration/hmr-test.ts | 31 ++-- integration/hook-useSubmit-test.ts | 6 +- integration/js-routes-test.ts | 6 +- integration/layout-route-test.ts | 6 +- integration/link-test.ts | 6 +- integration/loader-test.ts | 6 +- integration/matches-test.ts | 6 +- integration/mdx-test.ts | 6 +- integration/meta-test.ts | 6 +- integration/multiple-cookies-test.ts | 6 +- integration/navigation-state-test.ts | 6 +- integration/package.json | 3 + integration/path-mapping-test.ts | 4 +- integration/playwright-report/index.html | 62 +++++++ integration/postcss-test.ts | 10 +- integration/prefetch-test.ts | 8 +- integration/redirects-test.ts | 6 +- integration/rendering-test.ts | 6 +- integration/request-test.ts | 6 +- integration/resource-routes-test.ts | 8 +- integration/revalidate-test.ts | 6 +- integration/root-route-test.ts | 6 +- integration/route-collisions-test.ts | 2 +- integration/scroll-test.ts | 6 +- .../server-code-in-browser-message-test.ts | 6 +- integration/server-entry-test.ts | 7 +- integration/server-source-maps-test.ts | 4 +- integration/set-cookie-revalidation-test.ts | 6 +- integration/shared-route-imports-test.ts | 6 +- integration/splat-routes-test.ts | 4 +- integration/tailwind-test.ts | 8 +- integration/transition-test.ts | 6 +- integration/tsconfig.json | 6 +- integration/upload-test.ts | 8 +- integration/vanilla-extract-test.ts | 6 +- package.json | 2 +- packages/remix-dev/__tests__/init-test.ts | 2 +- packages/remix-dev/cli/commands.ts | 2 +- packages/remix-dev/compiler/css/bundle.ts | 2 +- .../remix-dev/compiler/plugins/cssImports.ts | 2 +- .../compiler/server/plugins/routes.ts | 2 +- packages/remix-dev/compiler/server/write.ts | 2 +- packages/remix-dev/compiler/utils/postcss.ts | 2 +- packages/remix-dev/devServer_unstable/env.ts | 2 +- yarn.lock | 174 ++++++++++-------- 82 files changed, 413 insertions(+), 305 deletions(-) create mode 100644 integration/package.json create mode 100644 integration/playwright-report/index.html diff --git a/integration/abort-signal-test.ts b/integration/abort-signal-test.ts index df4b5c38b1b..5a5a94339bd 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 84f4edee4e6..3755017ee5e 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 7a85b0ee219..9c83aa061af 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 0d6fe2c890a..fa117f8b638 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 9665527553e..0057a0fba72 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 00527d2c481..f1b9fe4e252 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 1077ed434cc..0ce94e4146f 100644 --- a/integration/cf-compiler-test.ts +++ b/integration/cf-compiler-test.ts @@ -4,7 +4,7 @@ import path from "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); @@ -39,6 +39,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 4f675344427..f46b8b3e97d 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 4cc7e861765..e064652427a 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,8 @@ 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, }, @@ -98,7 +98,7 @@ test.describe("compiler", () => { } `, "app/routes/package-with-submodule.jsx": js` - import { submodule } from "@org/package/sub-package"; + import { submodule } from "@org/package/sub-package/index.js"; export default function PackageWithSubModule() { return
{submodule()}
; @@ -149,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` @@ -163,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/conventional-routes-test.ts b/integration/conventional-routes-test.ts index 665ad3516c1..6a636ac4114 100644 --- a/integration/conventional-routes-test.ts +++ b/integration/conventional-routes-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/css-modules-test.ts b/integration/css-modules-test.ts index d2869cb35c7..267ee1a608e 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 2dc88893ede..ee96babc918 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/], future: { v2_routeConvention: true, }, @@ -290,6 +290,9 @@ test.describe("CSS side-effect imports", () => { ); }; `, + "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() { diff --git a/integration/custom-entry-server-test.ts b/integration/custom-entry-server-test.ts index 86115324ca7..4aae50d46e1 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 543bcc79b00..4df37c62c37 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 91b42b07ff9..682bf0450e7 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 3c74e03f8b5..5727348d423 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 "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; @@ -42,6 +42,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 c8c107d06ed..f62f0249965 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 "fs"; import path from "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 @@ -33,7 +33,7 @@ test("builds deterministically under different paths", async () => { }, 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 1680e24c8b6..e3359762e36 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 { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js"; -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", () => { let fixture: Fixture; diff --git a/integration/error-boundary-v2-test.ts b/integration/error-boundary-v2-test.ts index 8d76adc5a4f..42a76f75c3a 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 { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js"; -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", () => { let fixture: Fixture; diff --git a/integration/error-data-request-test.ts b/integration/error-data-request-test.ts index f852d4786c1..8a03193114c 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 8f356e59e03..4c9dbbec3d9 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 { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js"; -import type { Fixture } from "./helpers/create-fixture"; -import { createAppFixture, createFixture, js } from "./helpers/create-fixture"; -import { PlaywrightFixture } from "./helpers/playwright-fixture"; +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.jsx": js` diff --git a/integration/fetcher-layout-test.ts b/integration/fetcher-layout-test.ts index 1a8d8c44ba8..21fc9473659 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 2bca2fcbf15..c1c3ca76845 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 afcf7493148..e0a21a1c9b4 100644 --- a/integration/file-uploads-test.ts +++ b/integration/file-uploads-test.ts @@ -2,9 +2,9 @@ import * as fs from "fs/promises"; import * as path from "path"; 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; @@ -21,6 +21,7 @@ test.describe("file-uploads", () => { unstable_createMemoryUploadHandler as createMemoryUploadHandler, } from "@remix-run/node"; + const __dirname = path.dirname(new URL(import.meta.url).pathname); export let uploadHandler = composeUploadHandlers( createFileUploadHandler({ directory: path.resolve(__dirname, "..", "uploads"), diff --git a/integration/flat-routes-test.ts b/integration/flat-routes-test.ts index 8af9c20038e..1d7802ded50 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 2697c512e61..ae245fb17be 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 658a3c8d9ea..b2ec1454dca 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 17955377815..9915ba52424 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 99fc4262b64..13cc3c9bffb 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/create-fixture.ts b/integration/helpers/create-fixture.ts index 3c2e31ed9ca..ba9fb757585 100644 --- a/integration/helpers/create-fixture.ts +++ b/integration/helpers/create-fixture.ts @@ -9,13 +9,15 @@ 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 type { ServerBuild } from "../../build/node_modules/@remix-run/server-runtime"; -import { createRequestHandler } from "../../build/node_modules/@remix-run/server-runtime"; -import { createRequestHandler as createExpressHandler } from "../../build/node_modules/@remix-run/express"; +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"; const TMP_DIR = path.join(process.cwd(), ".tmp", "integration"); +const __dirname = path.dirname(new URL(import.meta.url).pathname); export interface FixtureInit { buildStdio?: Writable; @@ -38,7 +40,7 @@ export function json(value: JsonObject) { export async function createFixture(init: FixtureInit, mode?: ServerMode) { let projectDir = await createFixtureProject(init, mode); - let buildPath = path.resolve(projectDir, "build"); + let buildPath = path.resolve(projectDir, "build/index.js"); let app: ServerBuild = await import(buildPath); let handler = createRequestHandler(app, mode || ServerMode.Production); @@ -200,7 +202,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( @@ -220,6 +222,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 ecc8220007f..98d16465cb9 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 802e6e871dc..b326b26e1e9 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/playwright-fixture.ts b/integration/helpers/playwright-fixture.ts index 9cf6a58b689..c8f4c5789f4 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 1691476cf5d..5f21b66e805 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", future: { v2_dev: { port: options.devPort, @@ -27,6 +26,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"`, }, @@ -53,28 +53,28 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({ }), "server.js": js` - let path = require("path"); - let express = require("express"); - let { createRequestHandler } = require("@remix-run/express"); - let { logDevReady } = require("@remix-run/node"); + import path from "path"; + import express from "express"; + import { createRequestHandler } from "@remix-run/express"; + import { logDevReady } from "@remix-run/node"; const app = express(); 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 = 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 8df8a747317..18debace4ef 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", future: { v2_dev: { port: options.devPort, @@ -27,6 +31,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"`, }, @@ -54,27 +59,27 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({ }), "server.js": js` - let path = require("path"); - let express = require("express"); - let { createRequestHandler } = require("@remix-run/express"); - let { broadcastDevReady } = require("@remix-run/node"); + import path from "path"; + import express from "express"; + import { createRequestHandler } from "@remix-run/express"; + import { broadcastDevReady } from "@remix-run/node"; const app = express(); app.use(express.static("public", { immutable: true, maxAge: "1y" })); - const BUILD_DIR = path.join(process.cwd(), "build"); + const BUILD_PATH = path.join(process.cwd(), "build", "index.js"); app.all( "*", createRequestHandler({ - build: require(BUILD_DIR), + 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); @@ -83,7 +88,7 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({ `, "postcss.config.js": js` - module.exports = { + export default { plugins: { "postcss-import": {}, // Testing PostCSS cache invalidation tailwindcss: {}, @@ -93,7 +98,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 083fb07345f..ee89a4726a2 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 fa0d08c0590..506b88de860 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 749c759188b..4220632adab 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 b301a0fb4e7..1a23584ce4e 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 297db10b3d1..f03ff224c84 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 c1b20037fe8..8643b21109e 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 28e628a7736..05612fc3df0 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 a04a61e91bc..31106df15f2 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 7b261cb55de..c968e956164 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 319e9b58fea..b2e881ca120 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 6e8ea1ffb21..4cbbe4435fe 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 2d689632e08..a15addb1d7b 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"; @@ -44,7 +44,7 @@ test.describe("PostCSS enabled", () => { // This lets us assert that the plugin is being run // and that the correct context values are provided. "postcss.config.js": js` - module.exports = (ctx) => ({ + export default (ctx) => ({ plugins: [ { postcssPlugin: 'replace', @@ -64,7 +64,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 a70c714e10c..f9f657d0458 100644 --- a/integration/prefetch-test.ts +++ b/integration/prefetch-test.ts @@ -1,13 +1,13 @@ import { test, expect } from "@playwright/test"; -import { createAppFixture, createFixture, js } from "./helpers/create-fixture"; +import { createAppFixture, createFixture, js } 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 661f118f9fe..a1f5ee3ba9e 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 44a357a84f3..4dcd019f069 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 9458f456263..1bfa477b125 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 1282200a86a..a9b0a11801f 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 { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js"; -import { createAppFixture, createFixture, js } from "./helpers/create-fixture"; -import type { AppFixture, Fixture } from "./helpers/create-fixture"; -import { PlaywrightFixture } from "./helpers/playwright-fixture"; +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 492245de0f8..0b96b6d88d9 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 c103b74acd1..e0e09dd5ad7 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 f136d223cb0..20abffd981b 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 6f1428a1f1b..3253b420f6d 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 f1221620e02..5ea1fe22b49 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 d5eee980441..66db2d1f63b 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; @@ -81,6 +81,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 f0833d7c18d..bdace7787c0 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 "path"; import fsp from "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 8a87d0edee7..b549b8f3d12 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 8cd54fdc57f..1a51a152729 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 17e37e5afa0..89f209aa42d 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/tailwind-test.ts b/integration/tailwind-test.ts index d1673972089..0c7a0fa0af4 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 a1a99f4f33c..1c500f47310 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..af268c8887b 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": "Node16", "allowSyntheticDefaultImports": true, "strict": true, "resolveJsonModule": true, diff --git a/integration/upload-test.ts b/integration/upload-test.ts index ba08e5f00f4..7a21cbab9a1 100644 --- a/integration/upload-test.ts +++ b/integration/upload-test.ts @@ -1,13 +1,15 @@ import * as path from "path"; 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 = path.dirname(new URL(import.meta.url).pathname); + test.beforeAll(async () => { fixture = await createFixture({ config: { diff --git a/integration/vanilla-extract-test.ts b/integration/vanilla-extract-test.ts index 47cc7e335c8..02725f63f47 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 b450e52064b..e5cde0b7ebc 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,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/remix-dev/__tests__/init-test.ts b/packages/remix-dev/__tests__/init-test.ts index 43f6afbccc6..7d8878ce95c 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 "os"; import * as path from "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/cli/commands.ts b/packages/remix-dev/cli/commands.ts index bacb94477a0..0d0d1d5027f 100644 --- a/packages/remix-dev/cli/commands.ts +++ b/packages/remix-dev/cli/commands.ts @@ -1,7 +1,7 @@ import * as path from "path"; import { execSync } from "child_process"; import inspector from "inspector"; -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 8b47bb5ee1d..725723fef1f 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 "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 a0d81e79866..5ae675521d5 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 "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 7a8435500da..2ac7c58387b 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 "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 b68fac9a2e1..4ee28133832 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 "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 d7f5d11242e..39f9d8190a8 100644 --- a/packages/remix-dev/compiler/utils/postcss.ts +++ b/packages/remix-dev/compiler/utils/postcss.ts @@ -1,6 +1,6 @@ import path from "path"; import { pathToFileURL } from "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/devServer_unstable/env.ts b/packages/remix-dev/devServer_unstable/env.ts index b1e385d8449..72b033f8014 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 "path"; // Import environment variables from: .env, failing gracefully if it doesn't exist diff --git a/yarn.lock b/yarn.lock index b735663f103..7398bad0826 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4929,29 +4929,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" @@ -5346,22 +5347,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" @@ -5783,19 +5789,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" @@ -5804,21 +5810,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" @@ -5935,10 +5941,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" @@ -7152,9 +7158,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" @@ -7641,15 +7647,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-cache-semantics@^4.0.0: version "4.1.1" @@ -10490,10 +10496,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" @@ -10857,18 +10863,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" @@ -13098,7 +13112,7 @@ 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.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== From 069dc26ddb57a6dba6e22d1fc78d146bc47ef195 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Tue, 25 Jul 2023 13:35:40 -0700 Subject: [PATCH 03/18] update config snapshot test --- packages/remix-dev/__tests__/readConfig-test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/remix-dev/__tests__/readConfig-test.ts b/packages/remix-dev/__tests__/readConfig-test.ts index da6bbd772be..c340a7ab2c6 100644 --- a/packages/remix-dev/__tests__/readConfig-test.ts +++ b/packages/remix-dev/__tests__/readConfig-test.ts @@ -65,12 +65,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, From 75f4eaa8418a8b7439e9a50f63943f524777094e Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Tue, 25 Jul 2023 13:54:05 -0700 Subject: [PATCH 04/18] attempt to fix module resolution for tsc --- packages/create-remix/tsconfig.json | 2 +- packages/remix-css-bundle/tsconfig.json | 2 +- packages/remix-dev/__tests__/fixtures/indie-stack/tsconfig.json | 2 +- packages/remix-dev/tsconfig.json | 2 +- packages/remix-node/tsconfig.json | 1 + scripts/playground/template/tsconfig.json | 2 +- 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/create-remix/tsconfig.json b/packages/create-remix/tsconfig.json index 8f869b8dd8e..96608b6fc1c 100644 --- a/packages/create-remix/tsconfig.json +++ b/packages/create-remix/tsconfig.json @@ -4,7 +4,7 @@ "compilerOptions": { "lib": ["ES2019", "DOM", "DOM.Iterable"], "target": "ES2019", - "module": "CommonJS", + "module": "ES2020", "skipLibCheck": true, "composite": true, diff --git a/packages/remix-css-bundle/tsconfig.json b/packages/remix-css-bundle/tsconfig.json index 908cd884dcf..799b1b8345e 100644 --- a/packages/remix-css-bundle/tsconfig.json +++ b/packages/remix-css-bundle/tsconfig.json @@ -4,7 +4,7 @@ "compilerOptions": { "lib": ["ES2019", "DOM.Iterable"], "target": "ES2019", - "module": "CommonJS", + "module": "ES2020", "moduleResolution": "node", "allowSyntheticDefaultImports": true, "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..76e38a03f62 100644 --- a/packages/remix-dev/__tests__/fixtures/indie-stack/tsconfig.json +++ b/packages/remix-dev/__tests__/fixtures/indie-stack/tsconfig.json @@ -7,7 +7,7 @@ "isolatedModules": true, "esModuleInterop": true, "jsx": "react-jsx", - "module": "CommonJS", + "module": "ES2020", "moduleResolution": "node", "resolveJsonModule": true, "target": "ES2019", diff --git a/packages/remix-dev/tsconfig.json b/packages/remix-dev/tsconfig.json index a8ffaad7e25..1afe97e89fa 100644 --- a/packages/remix-dev/tsconfig.json +++ b/packages/remix-dev/tsconfig.json @@ -4,7 +4,7 @@ "compilerOptions": { "lib": ["ES2019", "DOM.Iterable"], "target": "ES2019", - "module": "CommonJS", + "module": "ES2020", "composite": true, "moduleResolution": "node", diff --git a/packages/remix-node/tsconfig.json b/packages/remix-node/tsconfig.json index ab2ee15a642..91ec5f08739 100644 --- a/packages/remix-node/tsconfig.json +++ b/packages/remix-node/tsconfig.json @@ -4,6 +4,7 @@ "compilerOptions": { "lib": ["ES2019", "DOM.Iterable"], "target": "ES2019", + "module": "ES2020", "composite": true, "moduleResolution": "node", diff --git a/scripts/playground/template/tsconfig.json b/scripts/playground/template/tsconfig.json index f7e2a5f4bf1..433f46e8cfd 100644 --- a/scripts/playground/template/tsconfig.json +++ b/scripts/playground/template/tsconfig.json @@ -7,7 +7,7 @@ "isolatedModules": true, "esModuleInterop": true, "jsx": "react-jsx", - "module": "CommonJS", + "module": "ES2020", "moduleResolution": "node", "resolveJsonModule": true, "target": "ES2019", From 8770ac79882c60429e238e97eed6a97d9eb54095 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Tue, 25 Jul 2023 16:57:14 -0700 Subject: [PATCH 05/18] force module detection for node project --- packages/remix-dev/modules.ts | 2 ++ packages/remix-node/tsconfig.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/remix-dev/modules.ts b/packages/remix-dev/modules.ts index 7ad6e685181..df558962e60 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-node/tsconfig.json b/packages/remix-node/tsconfig.json index 91ec5f08739..0ce682be900 100644 --- a/packages/remix-node/tsconfig.json +++ b/packages/remix-node/tsconfig.json @@ -6,7 +6,7 @@ "target": "ES2019", "module": "ES2020", "composite": true, - + "moduleDetection": "force", "moduleResolution": "node", "allowSyntheticDefaultImports": true, "strict": true, From be621cfbbd1d83e28ae9fdb7b64e4b8af7984f41 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Tue, 25 Jul 2023 16:58:14 -0700 Subject: [PATCH 06/18] change to node 18 --- .nvmrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.nvmrc b/.nvmrc index b6a7d89c68e..3c032078a4a 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16 +18 From 04f9d085d5b59c8252d5b871560ccd1bfb1ccc55 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Tue, 25 Jul 2023 17:05:11 -0700 Subject: [PATCH 07/18] update nvm version again --- .nvmrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.nvmrc b/.nvmrc index 3c032078a4a..209e3ef4b62 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -18 +20 From e08553caf1a90ce740ae9ef11c660150fa374c21 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Tue, 25 Jul 2023 17:09:07 -0700 Subject: [PATCH 08/18] revert moduleDetection --- packages/remix-express/tsconfig.json | 3 +-- packages/remix-node/tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/remix-express/tsconfig.json b/packages/remix-express/tsconfig.json index 5cdf6f7db04..f0a36f38def 100644 --- a/packages/remix-express/tsconfig.json +++ b/packages/remix-express/tsconfig.json @@ -13,7 +13,6 @@ "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/tsconfig.json b/packages/remix-node/tsconfig.json index 0ce682be900..91ec5f08739 100644 --- a/packages/remix-node/tsconfig.json +++ b/packages/remix-node/tsconfig.json @@ -6,7 +6,7 @@ "target": "ES2019", "module": "ES2020", "composite": true, - "moduleDetection": "force", + "moduleResolution": "node", "allowSyntheticDefaultImports": true, "strict": true, From bae0b63aa32b6b7ac7594f9a0c8b8c1a4d0c460d Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Wed, 2 Aug 2023 12:46:21 -0700 Subject: [PATCH 09/18] use bundler module resolution --- docs/guides/migrating-react-router-app.md | 2 +- docs/guides/typescript.md | 2 +- integration/helpers/cf-template/tsconfig.json | 2 +- integration/helpers/create-fixture.ts | 2 +- integration/helpers/node-template/tsconfig.json | 2 +- integration/tsconfig.json | 2 +- packages/create-remix/__tests__/fixtures/stack/tsconfig.json | 2 +- packages/create-remix/tsconfig.json | 2 +- packages/remix-architect/tsconfig.json | 2 +- packages/remix-cloudflare-pages/tsconfig.json | 2 +- packages/remix-cloudflare-workers/tsconfig.json | 2 +- packages/remix-cloudflare/tsconfig.json | 2 +- packages/remix-css-bundle/tsconfig.json | 2 +- packages/remix-dev/__tests__/fixtures/cloudflare/tsconfig.json | 2 +- packages/remix-dev/__tests__/fixtures/indie-stack/tsconfig.json | 2 +- packages/remix-dev/__tests__/fixtures/node/tsconfig.json | 2 +- packages/remix-dev/__tests__/fixtures/stack/tsconfig.json | 2 +- packages/remix-dev/tsconfig.json | 2 +- packages/remix-express/tsconfig.json | 2 +- packages/remix-netlify/tsconfig.json | 2 +- packages/remix-node/fetch.ts | 1 + packages/remix-node/tsconfig.json | 2 +- packages/remix-react/tsconfig.json | 2 +- packages/remix-serve/tsconfig.json | 2 +- packages/remix-server-runtime/formData.ts | 1 + packages/remix-server-runtime/tsconfig.json | 2 +- packages/remix-testing/tsconfig.json | 2 +- packages/remix-vercel/tsconfig.json | 2 +- packages/remix/tsconfig.json | 2 +- scripts/deployment-test/cypress/tsconfig.json | 2 +- scripts/playground/template/tsconfig.json | 2 +- scripts/tsconfig.json | 2 +- templates/arc/tsconfig.json | 2 +- templates/cloudflare-pages/tsconfig.json | 2 +- templates/cloudflare-workers/tsconfig.json | 2 +- templates/express/tsconfig.json | 2 +- templates/fly/tsconfig.json | 2 +- templates/netlify/tsconfig.json | 2 +- templates/remix/tsconfig.json | 2 +- 39 files changed, 39 insertions(+), 37 deletions(-) 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/typescript.md b/docs/guides/typescript.md index 7feb9f4d5a8..4b9f4d4774f 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/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 37176e5e7d8..3f3ca7a4939 100644 --- a/integration/helpers/create-fixture.ts +++ b/integration/helpers/create-fixture.ts @@ -11,10 +11,10 @@ import type { JsonObject } from "type-fest"; import type { AppConfig } from "@remix-run/dev"; 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 { installGlobals } from "../../build/node_modules/@remix-run/node/dist/index.js"; const TMP_DIR = path.join(process.cwd(), ".tmp", "integration"); 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/tsconfig.json b/integration/tsconfig.json index af268c8887b..12289eca96e 100644 --- a/integration/tsconfig.json +++ b/integration/tsconfig.json @@ -7,7 +7,7 @@ "module": "ES2020", "skipLibCheck": true, - "moduleResolution": "Node16", + "moduleResolution": "Bundler", "allowSyntheticDefaultImports": true, "strict": true, "resolveJsonModule": true, 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 96608b6fc1c..9a8eabe78b9 100644 --- a/packages/create-remix/tsconfig.json +++ b/packages/create-remix/tsconfig.json @@ -8,7 +8,7 @@ "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 799b1b8345e..752ddb528fe 100644 --- a/packages/remix-css-bundle/tsconfig.json +++ b/packages/remix-css-bundle/tsconfig.json @@ -5,7 +5,7 @@ "lib": ["ES2019", "DOM.Iterable"], "target": "ES2019", "module": "ES2020", - "moduleResolution": "node", + "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 76e38a03f62..54b8eef4435 100644 --- a/packages/remix-dev/__tests__/fixtures/indie-stack/tsconfig.json +++ b/packages/remix-dev/__tests__/fixtures/indie-stack/tsconfig.json @@ -8,7 +8,7 @@ "esModuleInterop": true, "jsx": "react-jsx", "module": "ES2020", - "moduleResolution": "node", + "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/tsconfig.json b/packages/remix-dev/tsconfig.json index 1afe97e89fa..8dbb4441b86 100644 --- a/packages/remix-dev/tsconfig.json +++ b/packages/remix-dev/tsconfig.json @@ -7,7 +7,7 @@ "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 f0a36f38def..9b99ce6b9ae 100644 --- a/packages/remix-express/tsconfig.json +++ b/packages/remix-express/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-netlify/tsconfig.json b/packages/remix-netlify/tsconfig.json index 318d0791405..2d0e1eeaa8c 100644 --- a/packages/remix-netlify/tsconfig.json +++ b/packages/remix-netlify/tsconfig.json @@ -6,7 +6,7 @@ "skipLibCheck": true, "composite": true, - "moduleResolution": "node", + "moduleResolution": "Bundler", "allowSyntheticDefaultImports": true, "strict": true, "declaration": true, diff --git a/packages/remix-node/fetch.ts b/packages/remix-node/fetch.ts index b4182a055e7..e66c323ac18 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 91ec5f08739..51a81b89dbc 100644 --- a/packages/remix-node/tsconfig.json +++ b/packages/remix-node/tsconfig.json @@ -7,7 +7,7 @@ "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/tsconfig.json b/packages/remix-serve/tsconfig.json index 78f08fa6185..22426018f14 100644 --- a/packages/remix-serve/tsconfig.json +++ b/packages/remix-serve/tsconfig.json @@ -8,7 +8,7 @@ "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-vercel/tsconfig.json b/packages/remix-vercel/tsconfig.json index 86904b2e032..08bfc8b1ab9 100644 --- a/packages/remix-vercel/tsconfig.json +++ b/packages/remix-vercel/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/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 433f46e8cfd..81d84527115 100644 --- a/scripts/playground/template/tsconfig.json +++ b/scripts/playground/template/tsconfig.json @@ -8,7 +8,7 @@ "esModuleInterop": true, "jsx": "react-jsx", "module": "ES2020", - "moduleResolution": "node", + "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/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/netlify/tsconfig.json b/templates/netlify/tsconfig.json index 20f8a386a6c..29ed4ae9962 100644 --- a/templates/netlify/tsconfig.json +++ b/templates/netlify/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, From 7a9bbda5c16e60ff12a0158162ca679a00865550 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Wed, 2 Aug 2023 12:50:49 -0700 Subject: [PATCH 10/18] fix lint issues --- integration/error-boundary-test.ts | 2 +- integration/error-boundary-v2-test.ts | 2 +- integration/error-sanitization-test.ts | 2 +- integration/resource-routes-test.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/integration/error-boundary-test.ts b/integration/error-boundary-test.ts index 89b68ad380e..5676b4e1599 100644 --- a/integration/error-boundary-test.ts +++ b/integration/error-boundary-test.ts @@ -1,6 +1,6 @@ import { test, expect } from "@playwright/test"; -import { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js"; +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"; diff --git a/integration/error-boundary-v2-test.ts b/integration/error-boundary-v2-test.ts index 57524b719e2..99e41b37de5 100644 --- a/integration/error-boundary-v2-test.ts +++ b/integration/error-boundary-v2-test.ts @@ -1,7 +1,7 @@ import type { Page } from "@playwright/test"; import { test, expect } from "@playwright/test"; -import { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js"; +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"; diff --git a/integration/error-sanitization-test.ts b/integration/error-sanitization-test.ts index e99233ef3e7..67d08784d41 100644 --- a/integration/error-sanitization-test.ts +++ b/integration/error-sanitization-test.ts @@ -1,6 +1,6 @@ import { test, expect } from "@playwright/test"; -import { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js"; +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"; diff --git a/integration/resource-routes-test.ts b/integration/resource-routes-test.ts index 95c5719aca6..1c9cd552bc6 100644 --- a/integration/resource-routes-test.ts +++ b/integration/resource-routes-test.ts @@ -1,6 +1,6 @@ import { test, expect } from "@playwright/test"; -import { ServerMode } from "../build/node_modules/@remix-run/server-runtime/dist/mode.js"; +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"; From e1f9fce27146d2c9b3e8047ba153b3178f8b0883 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Wed, 2 Aug 2023 13:07:53 -0700 Subject: [PATCH 11/18] update test --- integration/css-side-effect-imports-test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/integration/css-side-effect-imports-test.ts b/integration/css-side-effect-imports-test.ts index 473d9b042fa..31af92ebd30 100644 --- a/integration/css-side-effect-imports-test.ts +++ b/integration/css-side-effect-imports-test.ts @@ -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.jsx": js` From e23a0452a280afc8c608814fa19e15ecf72e1e28 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Tue, 8 Aug 2023 09:56:54 -0700 Subject: [PATCH 12/18] resolve path for windows CI --- integration/helpers/create-fixture.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/integration/helpers/create-fixture.ts b/integration/helpers/create-fixture.ts index 3f3ca7a4939..7ecd5284faf 100644 --- a/integration/helpers/create-fixture.ts +++ b/integration/helpers/create-fixture.ts @@ -151,7 +151,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); From ae19a2729fa5e63b65589e8b154452bf4b0116b5 Mon Sep 17 00:00:00 2001 From: Mark Dalgleish Date: Wed, 9 Aug 2023 11:41:59 +1000 Subject: [PATCH 13/18] fix postcss --- docs/file-conventions/remix-config.md | 2 +- docs/guides/styling.md | 8 ++++---- integration/postcss-test.ts | 4 ++-- packages/remix-dev/config.ts | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/file-conventions/remix-config.md b/docs/file-conventions/remix-config.md index 78c3187394c..7514e134414 100644 --- a/docs/file-conventions/remix-config.md +++ b/docs/file-conventions/remix-config.md @@ -72,7 +72,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/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/integration/postcss-test.ts b/integration/postcss-test.ts index f38ddcc3d30..2eb49cb1deb 100644 --- a/integration/postcss-test.ts +++ b/integration/postcss-test.ts @@ -38,8 +38,8 @@ 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` - export default (ctx) => ({ + "postcss.config.cjs": js` + module.exports = (ctx) => ({ plugins: [ { postcssPlugin: 'replace', diff --git a/packages/remix-dev/config.ts b/packages/remix-dev/config.ts index a18fc5a3d9b..d86aaa6694f 100644 --- a/packages/remix-dev/config.ts +++ b/packages/remix-dev/config.ts @@ -97,7 +97,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; @@ -260,7 +260,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; From 50ac5b5a15580a3b2c1c6146c7640e116acbf2d3 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Wed, 9 Aug 2023 09:01:29 -0700 Subject: [PATCH 14/18] update test files --- integration/fetch-globals-test.ts | 4 ++-- integration/svg-in-node-modules-test.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) 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/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; From d8f5d07f286657b79c8d762ab3b38bc184ed58c8 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Wed, 9 Aug 2023 09:28:56 -0700 Subject: [PATCH 15/18] update hmr postcss config --- integration/hmr-test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts index 29b78d711ef..e02d7b8b7f9 100644 --- a/integration/hmr-test.ts +++ b/integration/hmr-test.ts @@ -83,8 +83,8 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({ }); `, - "postcss.config.js": js` - export default { + "postcss.config.cjs": js` + module.exports = { plugins: { "postcss-import": {}, // Testing PostCSS cache invalidation tailwindcss: {}, From 774ee6b46b0b3f536058ffcd6f1ec9947360170b Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Wed, 9 Aug 2023 09:48:56 -0700 Subject: [PATCH 16/18] update create-fixture path resolution --- integration/helpers/create-fixture.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/integration/helpers/create-fixture.ts b/integration/helpers/create-fixture.ts index 7ecd5284faf..14a6d8cdd7f 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"; @@ -18,7 +19,7 @@ import { createRequestHandler as createExpressHandler } from "../../build/node_m import { installGlobals } from "../../build/node_modules/@remix-run/node/dist/index.js"; const TMP_DIR = path.join(process.cwd(), ".tmp", "integration"); -const __dirname = path.dirname(new URL(import.meta.url).pathname); +const __dirname = url.fileURLToPath(new URL('.', import.meta.url)); export interface FixtureInit { buildStdio?: Writable; From 3ea17d52349f15411541e881a70beb31ac512d4b Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Wed, 9 Aug 2023 14:08:51 -0700 Subject: [PATCH 17/18] fix: path resolution updates because windows --- integration/helpers/create-fixture.ts | 4 ++-- integration/hmr-log-test.ts | 3 ++- integration/hmr-test.ts | 3 ++- templates/express/server.js | 6 +++++- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/integration/helpers/create-fixture.ts b/integration/helpers/create-fixture.ts index 14a6d8cdd7f..cf4259c15fe 100644 --- a/integration/helpers/create-fixture.ts +++ b/integration/helpers/create-fixture.ts @@ -19,7 +19,7 @@ import { createRequestHandler as createExpressHandler } from "../../build/node_m 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)); +const __dirname = url.fileURLToPath(new URL(".", import.meta.url)); export interface FixtureInit { buildStdio?: Writable; @@ -43,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/index.js"); + let buildPath = url.pathToFileURL(path.join(projectDir, "build/index.js")).href; let app: ServerBuild = await import(buildPath); let handler = createRequestHandler(app, mode || ServerMode.Production); diff --git a/integration/hmr-log-test.ts b/integration/hmr-log-test.ts index 56e30e8df94..7607087d1b6 100644 --- a/integration/hmr-log-test.ts +++ b/integration/hmr-log-test.ts @@ -48,6 +48,7 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({ "server.js": js` 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"; @@ -58,7 +59,7 @@ 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_PATH = path.join(process.cwd(), "build", "index.js"); + const BUILD_PATH = url.pathToFileURL(path.join(process.cwd(), "build", "index.js")); app.all( "*", diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts index e02d7b8b7f9..0339e97f5c1 100644 --- a/integration/hmr-test.ts +++ b/integration/hmr-test.ts @@ -54,6 +54,7 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({ "server.js": js` 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"; @@ -63,7 +64,7 @@ let fixture = (options: { appPort: number; devPort: number }): FixtureInit => ({ const app = express(); app.use(express.static("public", { immutable: true, maxAge: "1y" })); - const BUILD_PATH = path.join(process.cwd(), "build", "index.js"); + const BUILD_PATH = url.pathToFileURL(path.join(process.cwd(), "build", "index.js")); app.all( "*", 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 } */ From 21ffd26cee1378f4b570631c2b83270cd3d4ba3c Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Wed, 9 Aug 2023 15:29:17 -0700 Subject: [PATCH 18/18] fix: path resolution updates because windows --- integration/file-uploads-test.ts | 14 +++++++++++--- integration/upload-test.ts | 8 ++++++-- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/integration/file-uploads-test.ts b/integration/file-uploads-test.ts index 2e098b618de..e72d3b9ba47 100644 --- a/integration/file-uploads-test.ts +++ b/integration/file-uploads-test.ts @@ -1,8 +1,13 @@ 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.js"; +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"; @@ -15,13 +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 = path.dirname(new URL(import.meta.url).pathname); + const __dirname = url.fileURLToPath(new URL(".", import.meta.url)); export let uploadHandler = composeUploadHandlers( createFileUploadHandler({ directory: path.resolve(__dirname, "..", "uploads"), @@ -111,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/upload-test.ts b/integration/upload-test.ts index c5ea4277679..1dc8df830e0 100644 --- a/integration/upload-test.ts +++ b/integration/upload-test.ts @@ -1,4 +1,5 @@ import * as path from "node:path"; +import * as url from "node:url"; import { test, expect } from "@playwright/test"; import { PlaywrightFixture } from "./helpers/playwright-fixture.js"; @@ -8,12 +9,14 @@ import { createAppFixture, createFixture, js } from "./helpers/create-fixture.js let fixture: Fixture; let appFixture: AppFixture; -const __dirname = path.dirname(new URL(import.meta.url).pathname); +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, @@ -24,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,