Module not found: Can't resolve '@radix-ui/react-select'

[turnsy]

I added the "Select" component using the exact command from the shadcn website, but keep getting this error:
Module not found: Can't resolve '@radix-ui/react-select', which is imported from the shadcn Select component for primitives.

// select.tsx
import * as SelectPrimitive from "@radix-ui/react-select";

I am able to import other @radix-ui packages, for example @radix-ui/accordion, and I have confirmed that@radix-ui/react-select exists in the correct directory adjacent to @radix-ui/accordion. This confirms to me it isn't a global configuration problem

Things I have tried:

• Reinstalling the @radix-ui/react-select package
• Reinstalling ALL packages
• Clearing npm cache
• Explicit importing ex. "../../node_modules/...etc"
• Switching to yarn from npm
• Importing components directly from @radix-ui/react-select, this also does not work.
• Forcing an alias in next.config.mjs and tsconfig.json
• Using import * as SelectPrimitive from '@radix-ui/react-select/dist/index';
• Any other common solution that Claude AI suggested

What could I be missing here? This blocks the usage of the Select component, and im curious if anyone else has seen this problem before.

[Shriharsh-Deshmukh]

You're likely dealing with a bundler or module resolution issue. Here's how to address it:

1. Ensure Correct Installation: Verify that @radix-ui/react-select is properly installed by checking your package.json and running:

   npm ls @radix-ui/react-select

2. Manual Path Resolution: If the package exists, but still isn't resolving, try importing directly from the package's index file:

   import * as SelectPrimitive from '@radix-ui/react-select/dist/index';

3. Next.js Module Resolution: Ensure your next.config.js includes proper module resolution:

   const path = require('path');
   module.exports = {
     webpack: (config) => {
       config.resolve.alias['@radix-ui/react-select'] = path.resolve(__dirname, 'node_modules/@radix-ui/react-select');
       return config;
     },
   };

4. Check for Peer Dependency Conflicts: Ensure there are no peer dependency conflicts by checking your node_modules for duplicate Radix packages.

This should resolve the import issue.

[turnsy]

I tried steps 1-3. Do you mind explaining 4 further?

[uvislive]

i am also facing same issue, tried all solutions but did not work

[Aribodo]

Im having a similar issue with the @radix-ui/react-tabs. No other issue with my other radix imports.

[ivan2214]

is it possible that the error is due to next js 15 and react 19?

[ivan2214]

this problem is provacte for turbopack

[viveleroi]

I'm having this same problem with a fresh install of https://github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template

None of these solutions appear to fix it.

[ivan2214]

The solution for me was to run pnpm dev without turbopack

[DanUgbeye]

It appears that Next 15 and react 19-rc with turbopack is broken for @radix-ui/react-collapsible and it affected @radix-ui/react-roving-focus, @radix-ui/react-focus-scope, @radix-ui/react-dropdown-menu, @radix-ui/react-dismissable-layer

Had to turn off turbo pack to fix