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

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 https://github.com/JedWatson/react-select/issues/5595, and a fix was attempted in https://github.com/JedWatson/react-select/pull/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.

Reproduce the failure in app/welcome/welcome.tsx using the React Router v7 setup and a direct react-select import. Start by examining how react-select is resolved by the Vite build system, comparing it with react-icons; done means the page renders with the direct import and no module-syntax error.