ui

ui copied to clipboard

I am using expo react-native and followed the installation steps listed here https://ui.shadcn.com/docs/installation. Not sure what I am missing here.

AssetRegistry.js:13 Uncaught Error: Cannot find module '@/components/ui/accordion' at webpackMissingModule (AssetRegistry.js:13:1) at ./src/components/Dashboard.jsx (AssetRegistry.js:13:1) at webpack_require (bootstrap:24:1) at fn (hot module replacement:62:1) at ./App.js (bundle.js:19:83) at webpack_require (bootstrap:24:1) at fn (hot module replacement:62:1) at ./node_modules/expo/AppEntry.js (WebBrowser.types.ts:192:1) at webpack_require (bootstrap:24:1) at startup:6:1

Under the hood, react native renders mobile native components that you would have used while coding in the native language on the platform.

https://reactnative.dev/docs/libraries#determining-library-compatibility

I am getting same error for Next.js I followed https://ui.shadcn.com/docs/installation/next

Same here. Followed the steps.

@MarkiyanPyts @cloudders-cloud I meet a similar error as well following the nextjs doc, turns out there's a typo in the doc, I bring a PR to fix that part https://github.com/shadcn-ui/ui/pull/1027

you need to import button component this way

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

Fixed in #1062

S

@MarkiyanPyts @cloudders-cloud I meet a similar error as well following the nextjs doc, turns out there's a typo in the doc, I bring a PR to fix that part #1027

you need to import button component this way

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

Same issue still exist

You might end up here if, like me, you're trying to set up path redirection in tsconfig.json, but your app is setup with Create React App.

In that case, you can't configure the proper path redirections because of how it configures Webpack. So to solve this, you need to rewire it someone and override its webpack config. Here is how:

https://plusreturn.com/blog/how-to-configure-a-path-alias-in-a-react-typescript-app-for-cleaner-imports/

Why is the shadcn community okay with such a vague import path that is problematic out of the box?

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

from @/components looks like a very bad naming convention

For the sake of everyone's sanity, just use a modern standard naming convention for imports like

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

I'm just trying to follow the tutorial for installing shadcn to render a button in a blank app and I'm running into this import issue: Cannot find module '@/components/ui/button' or its corresponding type declarations.ts(2307)

I'm not using webpack, just a simple Vite react app and this is problematic.

Why does this need to be overly complicated?

Why is the shadcn community okay with such a vague import path that is problematic out of the box?

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

from @/components looks like a very bad naming convention

For the sake of everyone's sanity, just use a modern standard naming convention for imports like

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

I'm just trying to follow the tutorial for installing shadcn to render a button in a blank app and I'm running into this import issue: Cannot find module '@/components/ui/button' or its corresponding type declarations.ts(2307)

I'm not using webpack, just a simple Vite react app and this is problematic.

Why does this need to be overly complicated?

I have the same problem, is over complicated to get a simple button in a page.

I cannot get this to work

I cannot get this to work

I finally have a solution.

First, change the reference in json file (components.json) from @ to components. Second, run again npx shadcn-ui@latest init the menu will ask again some options, answer in the same way as the first time. Now the reference should be working well, components will be in /components/ui, if fails, just check the PATH inside the component used to Utils file.

@kevincompton and everyone who is having this issue:

You need to add components manually using npx shadcn-ui@latest add COMPONENTNAME

Some examples: npx shadcn-ui@latest add textarea or npx shadcn-ui@latest add button