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

turnsy · 2024-09-08T19:51:17Z

turnsy
Sep 8, 2024

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 · 2024-09-08T20:40:47Z

Shriharsh-Deshmukh
Sep 8, 2024

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

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
```
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';
```

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;
  },
};