Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shadcn installation error : Error Module not found #517

Closed
rohitpathak21 opened this issue Apr 24, 2024 · 2 comments
Closed

Shadcn installation error : Error Module not found #517

rohitpathak21 opened this issue Apr 24, 2024 · 2 comments

Comments

@rohitpathak21
Copy link

I have been trying to install shadcn ui through the command given on its site : "npx shadcn-ui@latest init" but it's giving me an error : module not found. It's trying to import index.mjs file which is not there in the diff/ libs.
I tried all the recommended fixes like clearing cache, updating node js but none of them worked.
But when I downgraded the diff version from 5.2.0 to 5.0.1, the command worked and Shadcn was installed. So, there seems to be an issue with the diff folder of the version 5.2.0
IMG-20240422-WA0000

@ExplodingCabbage
Copy link
Collaborator

Hmm. Interesting. The file is there - see https://www.npmjs.com/package/diff/v/5.2.0 and navigate to lib/index.mjs - so I wonder what's going wrong? I do not have a very good understanding of JavaScript module systems and build pipelines, so I am gonna struggle to figure this one out, but I'll try (and maybe learn something). Help is welcome.

@ExplodingCabbage
Copy link
Collaborator

I can't reproduce this:

mark@fractal:~$ mkdir test
mark@fractal:~$ cd test
mark@fractal:~/test$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /home/mark/test/package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) 
mark@fractal:~/test$ npm install diff

added 1 package, and audited 2 packages in 469ms

found 0 vulnerabilities
mark@fractal:~/test$ npx shadcn-ui init
Need to install the following packages:
shadcn-ui@0.8.0
Ok to proceed? (y) y
file:///home/mark/.npm/_npx/74755fd285ad77f7/node_modules/shadcn-ui/dist/index.js:3
`);for(let r of o)if(r.includes("@apply")){let n=r.replace("@apply","").trim(),i=y(n,e);t=t.replace(n,i)}return t}var mt=[he,ye,ue,we],ft=new lt({compilerOptions:{}});async function dt(t){let e=await at.mkdtemp(ve.join(ct(),"shadcn-"));return ve.join(e,t)}async function U(t){let e=await dt(t.filename),o=ft.createSourceFile(e,t.raw,{scriptKind:pt.TSX});for(let r of mt)r({sourceFile:o,...t});return await xe({sourceFile:o,...t})}import Se from"chalk";import{Command as gt}from"commander";import{execa as be}from"execa";import ut from"ora";import q from"prompts";import*as x from"zod";var ht=x.object({components:x.array(x.string()).optional(),yes:x.boolean(),overwrite:x.boolean(),cwd:x.string(),all:x.boolean(),path:x.string().optional()}),Ie=new gt().name("add").description("add a component to your project").argument("[components...]","the components to add").option("-y, --yes","skip confirmation prompt.",!0).option("-o, --overwrite","overwrite existing files.",!1).option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",process.cwd()).option("-a, --all","add all available components",!1).option("-p, --path <path>","the path to add the component to.").action(async(t,e)=>{try{let o=ht.parse({components:t,...e}),r=K.resolve(o.cwd);Y(r)||(p.error(`The path ${r} does not exist. Please try again.`),process.exit(1));let n=await C(r);n||(p.warn(`Configuration is missing. Please run ${Se.green("init")} to create a components.json file.`),process.exit(1));let i=await N(),s=o.all?i.map(c=>c.name):o.components;if(!o.components?.length&&!o.all){let{components:c}=await q({type:"multiselect",name:"components",message:"Which components would you like to add?",hint:"Space to select. A to toggle all. Enter to submit.",instructions:!1,choices:i.map(d=>({title:d.name,value:d.name,selected:o.all?!0:o.components?.includes(d.name)}))});s=c}s?.length||(p.warn("No components selected. Exiting."),process.exit(0));let m=await G(i,s),f=await O(n.style,m),h=await z(n.tailwind.baseColor);if(f.length||(p.warn("Selected components not found. Exiting."),process.exit(0)),!o.yes){let{proceed:c}=await q({type:"confirm",name:"proceed",message:"Ready to install components and dependencies. Proceed?",initial:!0});c||process.exit(0)}let l=ut("Installing components...").start();for(let c of f){l.text=`Installing ${c.name}...`;let d=await W(n,c,o.path?K.resolve(r,o.path):void 0);if(!d)continue;if(Y(d)||await Te.mkdir(d,{recursive:!0}),c.files.filter(T=>Y(K.resolve(d,T.name))).length&&!o.overwrite)if(s.includes(c.name)){l.stop();let{overwrite:T}=await q({type:"confirm",name:"overwrite",message:`Component ${c.name} already exists. Would you like to overwrite?`,initial:!1});if(!T){p.info(`Skipped ${c.name}. To overwrite, run with the ${Se.green("--overwrite")} flag.`);continue}l.start(`Installing ${c.name}...`)}else continue;for(let T of c.files){let $=K.resolve(d,T.name),Re=await U({filename:T.name,raw:T.content,config:n,baseColor:h});n.tsx||($=$.replace(/\.tsx$/,".jsx"),$=$.replace(/\.ts$/,".js")),await Te.writeFile($,Re)}let k=await L(r);c.dependencies?.length&&await be(k,[k==="npm"?"install":"add",...c.dependencies],{cwd:r}),c.devDependencies?.length&&await be(k,[k==="npm"?"install":"add","-D",...c.devDependencies],{cwd:r})}l.succeed("Done.")}catch(o){I(o)}});import{existsSync as X,promises as xt}from"fs";import Z from"path";import A from"chalk";import{Command as yt}from"commander";import{diffLines as wt}from"diff";import*as v from"zod";var Ct=v.object({component:v.string().optional(),yes:v.boolean(),cwd:v.string(),path:v.string().optional()}),Ee=new yt().name("diff").description("check for updates against the registry").argument("[component]","the component name").option("-y, --yes","skip confirmation prompt.",!1).option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",process.cwd()).action(async(t,e)=>{try{let o=Ct.parse({component:t,...e}),r=Z.resolve(o.cwd);X(r)||(p.error(`The path ${r} does not exist. Please try again.`),process.exit(1));let n=await C(r);n||(p.warn(`Configuration is missing. Please run ${A.green("init")} to create a components.json file.`),process.exit(1));let i=await N();if(!o.component){let f=n.resolvedPaths.components,h=i.filter(c=>{for(let d of c.files){let w=Z.resolve(f,d);if(X(w))return!0}return!1}),l=[];for(let c of h){let d=await ze(c,n);d.length&&l.push({name:c.name,changes:d})}l.length||(p.info("No updates found."),process.exit(0)),p.info("The following components have updates available:");for(let c of l){p.info(`- ${c.name}`);for(let d of c.changes)p.info(`  - ${d.filePath}`)}p.break(),p.info(`Run ${A.green("diff <component>")} to see the changes.`),process.exit(0)}let s=i.find(f=>f.name===o.component);s||(p.error(`The component ${A.green(o.component)} does not exist.`),process.exit(1));let m=await ze(s,n);m.length||(p.info(`No updates found for ${o.component}.`),process.exit(0));for(let f of m)p.info(`- ${f.filePath}`),await vt(f.patch),p.info("")}catch(o){I(o)}});async function ze(t,e){let o=await O(e.style,[t]),r=await z(e.tailwind.baseColor),n=[];for(let i of o){let s=await W(e,i);if(s)for(let m of i.files){let f=Z.resolve(s,m.name);if(!X(f))continue;let h=await xt.readFile(f,"utf8"),l=await U({filename:m.name,raw:m.content,config:e,baseColor:r}),c=wt(l,h);c.length>1&&n.push({file:m.name,filePath:f,patch:c})}}return n}async function vt(t){t.forEach(e=>{if(e)return e.added?process.stdout.write(A.green(e.value)):e.removed?process.stdout.write(A.red(e.value)):process.stdout.write(e.value)})}import{existsSync as Oe,promises as E}from"fs";import P from"path";import B from"path";import ee from"fast-glob";import Q,{pathExists as Tt}from"fs-extra";import{loadConfig as St}from"tsconfig-paths";var te=["**/node_modules/**",".next","public","dist","build"];async function Pe(t){let e=await C(t);if(e)return e;let o=await bt(t),r=await It(t),n=await zt(t);if(!o||!r||!n)return null;let i=await Et(t),s={$schema:"https://ui.shadcn.com/schema.json",rsc:["next-app","next-app-src"].includes(o),tsx:i,style:"new-york",tailwind:{config:i?"tailwind.config.ts":"tailwind.config.js",baseColor:"zinc",css:r,cssVariables:!0,prefix:""},aliases:{utils:`${n}/lib/utils`,components:`${n}/components`}};return await b(t,s)}async function bt(t){if(!(await ee.glob("**/*",{cwd:t,deep:3,ignore:te})).find(i=>i.startsWith("next.config.")))return null;let r=await Q.pathExists(B.resolve(t,"src"));return await Q.pathExists(B.resolve(t,`${r?"src/":""}app`))?r?"next-app-src":"next-app":r?"next-pages-src":"next-pages"}async function It(t){let e=await ee.glob("**/*.css",{cwd:t,deep:3,ignore:te});if(!e.length)return null;for(let o of e)if((await Q.readFile(B.resolve(t,o),"utf8")).includes("@tailwind base"))return o;return null}async function zt(t){let e=await St(t);if(e?.resultType==="failed"||!e?.paths)return null;for(let[o,r]of Object.entries(e.paths))if(r.includes("./*")||r.includes("./src/*"))return o.at(0);return null}async function Et(t){return Tt(B.resolve(t,"tsconfig.json"))}async function $e(t){if(!(await ee.glob("tailwind.config.*",{cwd:t,deep:3,ignore:te})).length)throw new Error("Tailwind CSS is not installed. Visit https://tailwindcss.com/docs/installation to get started.");return!0}var je=`import { type ClassValue, clsx } from "clsx"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

Error: Tailwind CSS is not installed. Visit https://tailwindcss.com/docs/installation to get started.
    at $e (file:///home/mark/.npm/_npx/74755fd285ad77f7/node_modules/shadcn-ui/dist/index.js:3:7112)

Node.js v20.11.1
mark@fractal:~/test$ npm install -D tailwindcss

added 112 packages, and audited 114 packages in 860ms

29 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
mark@fractal:~/test$ npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js
mark@fractal:~/test$ npx shadcn-ui init
✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … app/globals.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) … 
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no / yes
✔ Write configuration to components.json. Proceed? … yes

✔ Writing components.json...
Failed to load jsconfig.json. Couldn't find tsconfig.json
mark@fractal:~/test$ cat package.json 
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "diff": "^5.2.0"
  },
  "devDependencies": {
    "tailwindcss": "^3.4.3"
  }
}

Not sure what I can do without instructions on how to repro this in a fresh project.

@ExplodingCabbage ExplodingCabbage closed this as not planned Won't fix, can't repro, duplicate, stale May 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants