Skip to content

feat(react-router): don't bundle react-router in react-router/dom export #13497

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 1, 2025
Merged

feat(react-router): don't bundle react-router in react-router/dom export #13497

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b2bc694
Don't bundle react-router in react-router/dom export
brophdawg11 Apr 29, 2025
84425ce
Add externals to ESM build and remove unneeded react externals
brophdawg11 Apr 30, 2025
fc893df
Fix e2e tests
brophdawg11 Apr 30, 2025
1fc71ae
Remove console
brophdawg11 Apr 30, 2025
220239f
Remove blank line
brophdawg11 Apr 30, 2025
87d545c
Don't include external in ESM config
brophdawg11 May 1, 2025
488e330
Revert "Fix e2e tests"
brophdawg11 May 1, 2025
818f8e0
Add unit test
brophdawg11 May 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/breezy-pets-hug.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"react-router": patch
---

Don't bundle `react-router` in `react-router/dom` CJS export
15 changes: 10 additions & 5 deletions integration/prefetch-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,8 @@ test.describe("prefetch", () => {
await page.waitForSelector(
// Look for either Rollup or Rolldown chunks
[
"#nav link[rel='modulepreload'][href^='/assets/chunk-']",
// Rollup bundles RR (and transitively React) into an index chunk
"#nav link[rel='modulepreload'][href^='/assets/index-']",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@markdalgleish Does this feel expected or unexpected to you now that I added the external config to ESM? I'm temped to remove it so we stick with the prior ESM handling...

Copy link
Member

@markdalgleish markdalgleish May 1, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As in, this change is introducing an additional chunk in the final app build? I wouldn't have guessed this would change. I've we're specifically targeting an issue with CJS build, I'm not against scoping the externals config to that build, so if you roll it back, maybe just add a comment explaining why it's not configured in the ESM build?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know that it's an additional chunk so much as a renamed chunk, but yeah I think I'll roll it back on the ESM build for now to keep the surface area minimal and we can revisit later if need be.

"#nav link[rel='modulepreload'][href^='/assets/jsx-runtime-']",
].join(","),
{ state: "attached" }
Expand Down Expand Up @@ -222,7 +223,8 @@ test.describe("prefetch", () => {
await page.waitForSelector(
// Look for either Rollup or Rolldown chunks
[
"#nav link[rel='modulepreload'][href^='/assets/chunk-']",
// Rollup bundles RR (and transitively React) into an index chunk
"#nav link[rel='modulepreload'][href^='/assets/index-']",
"#nav link[rel='modulepreload'][href^='/assets/jsx-runtime-']",
].join(","),
{ state: "attached" }
Expand All @@ -241,7 +243,8 @@ test.describe("prefetch", () => {
await page.waitForSelector(
// Look for either Rollup or Rolldown chunks
[
"#nav link[rel='modulepreload'][href^='/assets/chunk-']",
// Rollup bundles RR (and transitively React) into an index chunk
"#nav link[rel='modulepreload'][href^='/assets/index-']",
"#nav link[rel='modulepreload'][href^='/assets/jsx-runtime-']",
].join(","),
{ state: "attached" }
Expand Down Expand Up @@ -321,7 +324,8 @@ test.describe("prefetch", () => {
await page.waitForSelector(
// Look for either Rollup or Rolldown chunks
[
"#nav link[rel='modulepreload'][href^='/assets/chunk-']",
// Rollup bundles RR (and transitively React) into an index chunk
"#nav link[rel='modulepreload'][href^='/assets/index-']",
"#nav link[rel='modulepreload'][href^='/assets/jsx-runtime-']",
].join(","),
{ state: "attached" }
Expand All @@ -340,7 +344,8 @@ test.describe("prefetch", () => {
await page.waitForSelector(
// Look for either Rollup or Rolldown chunks
[
"#nav link[rel='modulepreload'][href^='/assets/chunk-']",
// Rollup bundles RR (and transitively React) into an index chunk
"#nav link[rel='modulepreload'][href^='/assets/index-']",
"#nav link[rel='modulepreload'][href^='/assets/jsx-runtime-']",
].join(","),
{ state: "attached" }
Expand Down
4 changes: 4 additions & 0 deletions packages/react-router/tsup.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ const config = (enableDevWarnings: boolean) =>
clean: false,
entry,
format: ["cjs"],
// Don't bundle `react-router` in sub-exports (i.e., `react-router/dom`)
external: ["react-router"],
outDir: enableDevWarnings ? "dist/development" : "dist/production",
dts: true,
banner: {
Expand All @@ -28,6 +30,8 @@ const config = (enableDevWarnings: boolean) =>
clean: false,
entry,
format: ["esm"],
// Don't bundle `react-router` in sub-exports (i.e., `react-router/dom`)
external: ["react-router"],
outDir: enableDevWarnings ? "dist/development" : "dist/production",
dts: true,
banner: {
Expand Down