Import Alias Problem

[Ankan002]

First of all I ran all the config steps using the CLI tool and it generated a components.json file:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": false
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

After that in the components directory the file system was

|
|-components
   |- context-provider
   |- hello
      |- hello.tsx
      |- index.ts
   |- index.ts

hello/hello.tsx

const Hello = () => {
    return <h1>Hello</h1>;
};

export default Hello;

hello/index.ts

export { default as Hello } from "./hello";

index.ts

export * from "./hello";

Now I am using this component in my home page in,

/app/page.tsx

import { Hello } from "@/components";

export default function Home() {
    return (
        <main className="min-h-screen w-full bg-white">
            <h1 className="text-black">Hello</h1>
            <Hello />
        </main>
    );
}

On starting the dev server I start getting a very weird error saying the following

So can anybody help me fixing this issue?

[dan5py]

Hi @Ankan002. Try to add the 'use client' directive at the top of the hello.tsx file.

[Ankan002]

Hi @Ankan002. Try to add the 'use client' directive at the top of the hello.tsx file.

Actually tried that as well but it didnot work out

[dan5py]

I tried replicating it but without success. What version of next are you using?

[Ankan002]

@dan5py its 13.4

[james-meneses-he]

Hi Ankan, have you been able to solve it? Here, it only worked when using the actual components pathes. The alias breaks since shadcn installation. As I'm new to nextjs13 and tailwind as well, I couldn't find what change affected this and how to solve it.

It would be great if someone could share some light.

[Ankan002]

Actually I was using some weird hacks around it but I would surely try to resolve the issue.

[luannguyenQV]

In the tsconfig.json, you can add these line:

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

[Zheng-Zuo]

I'm having the exact same issue. after installing shadcn-ui, any exports from index.js file under components folder can not be imported through: import { name } from "@/components", absolute path works only. Please let me know if you guys can solve it

[alvinleigia]

Hi @Ankan002 did u manage to get a resolve on this? It seems the index.ts file inside the components folder is getting ignored

Note:- I tried renaming the index.ts file to export.ts and tried importing it as @components/exports, this worked.

Not sure whats triggering this.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.