Skip to content

Commit

Permalink
🩹 [open-formulieren/open-forms#4929] Workaround react-router/dom issue
Browse files Browse the repository at this point in the history
In vitest the react-router and react-router/dom imports resolve to
(CommonJS?) bundles which each contain copies of the contexts/objects
used by react router, which make you effectively end up with multiple
installations of react router. This leads to broken contexts and failing
tests, see remix-run/react-router#12785 for
more context.

Patching the resolution in vite config allows us to force loading the
mjs modules instead of the CJS build which doesn't have this problem,
because both the react-router and react-router/dom entrypoints depend
on the same chunk containing the shared code.
  • Loading branch information
sergei-maertens committed Jan 23, 2025
1 parent f7dfd13 commit 12e2591
Showing 1 changed file with 11 additions and 0 deletions.
11 changes: 11 additions & 0 deletions vite.config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {codecovVitePlugin} from '@codecov/vite-plugin';
import replace from '@rollup/plugin-replace';
import {sentryVitePlugin} from '@sentry/vite-plugin';
import react from '@vitejs/plugin-react';
import path from 'path';
import type {OutputOptions} from 'rollup';
import {defineConfig} from 'vite';
import jsconfigPaths from 'vite-jsconfig-paths';
Expand Down Expand Up @@ -173,6 +174,16 @@ export default defineConfig(({mode}) => ({
uploadToken: process.env.CODECOV_TOKEN,
}),
],
resolve: {
alias: {
// ensure react-router imports don't end up with multiple copies/installations. See
// https://github.com/remix-run/react-router/issues/12785 for more context.
'react-router/dom': path.resolve(
'./node_modules/react-router/dist/development/dom-export.mjs'
),
'react-router': path.resolve('./node_modules/react-router/dist/development/index.mjs'),
},
},
build: {
target: 'modules', // the default
assetsInlineLimit: 8 * 1024, // 8 KiB
Expand Down

0 comments on commit 12e2591

Please sign in to comment.