Error when importing in React Router v7 project: "Cannot use import statement outside a module"

[MikeFHay]

Environment

• react-select: v5.10.1
• React Router: v7.5.3

Repro steps

1. Create a React Router project per its documentation

npx create-react-router@latest router-select-repro
cd router-select-repro
npm i
npm run dev

2. Confirm page renders successfully.
3. Install react-select: npm i react-select
4. Add import Select from 'react-select'; to app/welcome/welcome.tsx
5. Confirm that page no longer renders successfully, but instead shows error:

   [vite] Internal server error: Cannot use import statement outside a module

Additional information

• Other packages with ES modules work correctly (tested with react-icons)
• The error appears to be related to module resolution in the Vite build system that React Router v7 uses

Related issues

A similar (possibly the same) issue was reported in #5595, and a fix was attempted in #5626, but the issue persists within React Router/vite projects.

Workaround

Importing lazily with const Select = React.lazy(() => import('react-select')); avoids this error, but is unsatisfying as it loses type information, and likely has other implications.

[marcioluis]

This error happens when upgrading Vite to version 6 and above.
I tested some combinations with react-router and what caused the issue is Vite 6

[Phoenixmatrix]

We've hit this. Doesn't happen with just React Router 7 and Vite 5
Does not happen with Vite 6 and Remix v2.

But when the two are together, then, and only then, it happens. We're still investigating on our side.