Can't use Shadcn components – Reactjs

The Problem:

You’re having trouble using Shadcn in your React + Tailwind app. When you try to use the Button component from @/components/ui/button, you get an error saying that it can’t resolve the module. You have a jsconfig.json file and have tried different configurations, but the issue persists. The error is likely due to incorrect configuration of the jsconfig.json file or issues with the Shadcn installation.

The Solutions:

Solution 1: Convert relative path to absolute path in import statement

Problem:
Trying to use a component from a different directory but getting an error due to the relative path in the import statement.

Solution:
Convert the relative path in the import statement to an absolute path. For example, instead of importing like:

import { Button } from "@/components/ui/button"

Use an absolute path:

import { Button } from "/ui/button"

Solution 2: Update Aliases and Paths

First, consider using TypeScript, which Shadcn recommends for its components. However, if you prefer JavaScript:

1. Update the jsconfig.json file to use paths relative to the src folder, as suggested by the second jsconfig example:

   {
     "compilerOptions": {
       "paths": {
         "@/*": ["./src/*"]
       }
     }
   }
   

2. In the components.json file, try using "~" instead of "@" for aliases:

   {
     ...
     "aliases": {
       "utils": "~/lib/utils",
       "components": "~/components"
     }
   }
   

3. Alternatively, you could specify the full path to components in the aliases:

   {
     ...
     "aliases": {
       "utils": "~/lib/utils",
       "components": "~/src/components"
     }
   }
   

Solution 3: Modify jsconfig.json and vite.config.js

In the provided jsconfig.json file, the "include" and "exclude" fields are missing. Add them to the file as follows:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "**/*.js",
    "**/*.jsx",
    "tailwind.config.tsss"
  ],
  "exclude": ["node_modules"]
}

Additionally, create a vite.config.js file and add the following contents:

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Finally, move the "components" and "lib" folders into the "src" folder. This should resolve the issue and allow you to use the Shadcn components.

Solution 4: Replace export const with export default

In your ./src/components/ui/button/index.js file, replace export const Button with export default Button. This change will make the Button component available to be imported and used in other files using the default export syntax.

An example of the correct code structure:

// ./src/components/ui/button/index.js
import { forwardRef } from "react";

export default forwardRef((props, ref) => {
  // Button implementation here
});

Video Explanation: