From 7819e041a5c45b48e7c429abdfd655d4de5dff40 Mon Sep 17 00:00:00 2001 From: Jacob Ebey Date: Wed, 13 Nov 2024 09:43:17 -0800 Subject: [PATCH] chore: re-enable development warnings (#12269) * chore: re-enable development warnings * remove warning as we are testing against production build. It is covered in unit tests * Create four-needles-search.md * chore: add ssr conditions / external conditions --- .changeset/four-needles-search.md | 7 +++ integration/vite-spa-mode-test.ts | 10 ---- jest/jest.config.shared.js | 3 ++ packages/react-router-dev/vite/plugin.ts | 6 +++ packages/react-router/lib/components.tsx | 6 +-- packages/react-router/lib/hooks.tsx | 6 +-- packages/react-router/package.json | 49 ++++++++++++-------- packages/react-router/tsup.config.ts | 59 +++++++++++++----------- 8 files changed, 84 insertions(+), 62 deletions(-) create mode 100644 .changeset/four-needles-search.md diff --git a/.changeset/four-needles-search.md b/.changeset/four-needles-search.md new file mode 100644 index 000000000..f4552bd2c --- /dev/null +++ b/.changeset/four-needles-search.md @@ -0,0 +1,7 @@ +--- +"integration": patch +"@react-router/dev": patch +"react-router": patch +--- + +chore: re-enable development warnings through a `development` exports condition. diff --git a/integration/vite-spa-mode-test.ts b/integration/vite-spa-mode-test.ts index c6c4d96ee..ec15ca76e 100644 --- a/integration/vite-spa-mode-test.ts +++ b/integration/vite-spa-mode-test.ts @@ -566,16 +566,6 @@ test.describe("SPA Mode", () => { await page.waitForSelector("[data-root]"); expect(await page.locator("[data-root]").textContent()).toBe("Root"); expect(await page.locator("[data-index]").textContent()).toBe("Index"); - - // Hydrates without issues - this message is expected due to the nested - expect(logs).toEqual([ - 'You rendered descendant (or called `useRoutes()`) at "/" ' + - '(under ) but the parent route path has no trailing "*". ' + - "This means if you navigate deeper, the parent won't match anymore and " + - "therefore the child routes will never render." + - "\n\n" + - 'Please change the parent to .', - ]); }); test("wraps default root HydrateFallback in user-provided Layout", async ({ diff --git a/jest/jest.config.shared.js b/jest/jest.config.shared.js index 05322e3a9..2934b3246 100644 --- a/jest/jest.config.shared.js +++ b/jest/jest.config.shared.js @@ -24,4 +24,7 @@ module.exports = { "\\.[jt]sx?$": require.resolve("./transform"), }, watchPathIgnorePatterns: [...ignorePatterns, "\\/node_modules\\/"], + globals: { + __DEV__: true, + }, }; diff --git a/packages/react-router-dev/vite/plugin.ts b/packages/react-router-dev/vite/plugin.ts index 1320d0178..5203d077f 100644 --- a/packages/react-router-dev/vite/plugin.ts +++ b/packages/react-router-dev/vite/plugin.ts @@ -821,6 +821,11 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => { ssr: { external: ssrExternals, + resolve: { + conditions: viteCommand === "build" ? [] : ["development"], + externalConditions: + viteCommand === "build" ? [] : ["development"], + }, }, optimizeDeps: { include: [ @@ -858,6 +863,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => { "react-router/dom", "react-router-dom", ], + conditions: viteCommand === "build" ? [] : ["development"], }, base: viteUserConfig.base, diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx index 0e69f97fe..b03cc52a7 100644 --- a/packages/react-router/lib/components.tsx +++ b/packages/react-router/lib/components.tsx @@ -62,9 +62,9 @@ import { import type { ViewTransition } from "./dom/global"; import { warnOnce } from "./server-runtime/warnings"; -// TODO: Let's get this back to using an import map and development/production -// condition once we get the rollup build replaced -const ENABLE_DEV_WARNINGS = true; +// Provided by the build system +declare const __DEV__: boolean; +const ENABLE_DEV_WARNINGS = __DEV__; /** * @private diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx index 68e7b9a8a..3ff8f96d2 100644 --- a/packages/react-router/lib/hooks.tsx +++ b/packages/react-router/lib/hooks.tsx @@ -50,9 +50,9 @@ import { } from "./router/utils"; import type { SerializeFrom } from "./types"; -// TODO: Let's get this back to using an import map and development/production -// condition once we get the rollup build replaced -const ENABLE_DEV_WARNINGS = true; +// Provided by the build system +declare const __DEV__: boolean; +const ENABLE_DEV_WARNINGS = __DEV__; /** Resolves a URL against the current location. diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 6ee1029e0..c1b2e685e 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -18,42 +18,53 @@ "license": "MIT", "author": "Remix Software ", "sideEffects": false, - "types": "./dist/index.d.ts", - "main": "./dist/index.js", - "unpkg": "./dist/umd/react-router.production.min.js", - "module": "./dist/index.mjs", + "types": "./dist/production/index.d.ts", + "main": "./dist/production/index.js", + "module": "./dist/production/index.mjs", "exports": { ".": { "node": { - "types": "./dist/index.d.ts", - "module-sync": "./dist/index.mjs", - "default": "./dist/index.js" + "types": "./dist/production/index.d.ts", + "development": { + "module-sync": "./dist/development/index.mjs", + "default": "./dist/development/index.js" + }, + "module-sync": "./dist/production/index.mjs", + "default": "./dist/production/index.js" }, "import": { - "types": "./dist/index.d.mts", - "default": "./dist/index.mjs" + "types": "./dist/production/index.d.mts", + "development": "./dist/development/index.mjs", + "default": "./dist/production/index.mjs" }, "default": { - "types": "./dist/index.d.ts", - "default": "./dist/index.js" + "types": "./dist/production/index.d.ts", + "development": "./dist/development/index.js", + "default": "./dist/production/index.js" } }, "./types": { - "types": "./dist/lib/types.d.ts" + "types": "./dist/production/lib/types.d.ts" }, "./dom": { "node": { - "types": "./dist/dom-export.d.ts", - "module-sync": "./dist/dom-export.mjs", - "default": "./dist/dom-export.js" + "types": "./dist/production/dom-export.d.ts", + "development": { + "module-sync": "./dist/development/dom-export.mjs", + "default": "./dist/development/dom-export.js" + }, + "module-sync": "./dist/production/dom-export.mjs", + "default": "./dist/production/dom-export.js" }, "import": { - "types": "./dist/dom-export.d.mts", - "default": "./dist/dom-export.mjs" + "types": "./dist/production/dom-export.d.mts", + "development": "./dist/development/dom-export.mjs", + "default": "./dist/production/dom-export.mjs" }, "default": { - "types": "./dist/dom-export.d.ts", - "default": "./dist/dom-export.js" + "types": "./dist/production/dom-export.d.ts", + "development": "./dist/development/dom-export.js", + "default": "./dist/production/dom-export.js" } }, "./package.json": "./package.json" diff --git a/packages/react-router/tsup.config.ts b/packages/react-router/tsup.config.ts index 1bf480471..6e28b64c7 100644 --- a/packages/react-router/tsup.config.ts +++ b/packages/react-router/tsup.config.ts @@ -7,32 +7,37 @@ import pkg from "./package.json"; const entry = ["index.ts", "dom-export.ts", "lib/types.ts"]; -export default defineConfig([ - { - clean: false, - entry, - format: ["cjs"], - outDir: "dist", - dts: true, - banner: { - js: createBanner(pkg.name, pkg.version), +const config = (enableDevWarnings: boolean) => + defineConfig([ + { + clean: false, + entry, + format: ["cjs"], + outDir: enableDevWarnings ? "dist/development" : "dist/production", + dts: true, + banner: { + js: createBanner(pkg.name, pkg.version), + }, + define: { + "import.meta.hot": "undefined", + REACT_ROUTER_VERSION: JSON.stringify(pkg.version), + __DEV__: JSON.stringify(enableDevWarnings), + }, }, - define: { - "import.meta.hot": "undefined", - REACT_ROUTER_VERSION: JSON.stringify(pkg.version), + { + clean: false, + entry, + format: ["esm"], + outDir: enableDevWarnings ? "dist/development" : "dist/production", + dts: true, + banner: { + js: createBanner(pkg.name, pkg.version), + }, + define: { + REACT_ROUTER_VERSION: JSON.stringify(pkg.version), + __DEV__: JSON.stringify(enableDevWarnings), + }, }, - }, - { - clean: false, - entry, - format: ["esm"], - outDir: "dist", - dts: true, - banner: { - js: createBanner(pkg.name, pkg.version), - }, - define: { - REACT_ROUTER_VERSION: JSON.stringify(pkg.version), - }, - }, -]); + ]); + +export default defineConfig([...config(false), ...config(true)]);