[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live) [Help](/c/help/9) # The project seems out of place 130 views · 8 likes · 10 posts Kalcha (@kalchaqui) · 2024-07-23 Good morning, could someone guide me with a question, I see the vscode project fine when I run: npm run dev, and when I run: npm run build. and when I do: vercel --prod It uploads it, but everything shows up out of place. What could it be.? I share. thank you! https://vercel.com/kalchas-projects/project-x log: [21:05:52.151] Running build in Washington, D.C., USA (East) – iad1 [21:05:52.422] Retrieving list of deployment files... [21:05:52.866] Previous build cache not available [21:05:52.968] Downloading 32 deployment files... [21:05:53.870] Running "vercel build" [21:05:54.437] Vercel CLI 35.1.0 [21:05:54.854] Installing dependencies... [21:05:58.992] npm warn deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142 [21:06:00.117] npm warn deprecated har-validator@5.1.5: this library is no longer supported [21:06:00.152] npm warn deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 [21:06:03.461] npm warn deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) [21:06:03.614] npm warn deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. [21:06:03.643] npm warn deprecated uuid@2.0.1: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. [21:06:03.670] npm warn deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) [21:06:10.463] [21:06:10.464] added 815 packages in 15s [21:06:10.464] [21:06:10.465] 141 packages are looking for funding [21:06:10.465] run `npm fund` for details [21:06:10.488] Detected Next.js version: 13.2.4 [21:06:10.495] Detected `package-lock.json` generated by npm 7+ [21:06:10.495] Running "npm run build" [21:06:10.627] [21:06:10.628] > crowdfunding@0.1.0 build [21:06:10.628] > next build [21:06:10.628] [21:06:11.102] Attention: Next.js now collects completely anonymous telemetry regarding usage. [21:06:11.103] This information is used to shape Next.js' roadmap and prioritize features. [21:06:11.103] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: [21:06:11.104] https://nextjs.org/telemetry [21:06:11.104] [21:06:11.218] info - Linting and checking validity of types... [21:06:11.373] info - Creating an optimized production build... [21:06:14.748] Browserslist: caniuse-lite is outdated. Please run: [21:06:14.748] npx update-browserslist-db@latest [21:06:14.749] Why you should do it regularly: https://github.com/browserslist/update-db#readme [21:06:14.924] [21:06:14.925] [1m[33mwarn[39m[22m - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration. [21:06:14.925] [1m[33mwarn[39m[22m - https://tailwindcss.com/docs/content-configuration [21:06:17.552] Browserslist: caniuse-lite is outdated. Please run: [21:06:17.552] npx browserslist@latest --update-db [21:06:17.558] Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating [21:06:18.048] info - Compiled successfully [21:06:18.052] info - Collecting page data... [21:06:24.333] info - Generating static pages (0/3) [21:06:24.373] undefined [21:06:24.375] undefined [21:06:24.375] undefined [21:06:24.439] info - Generating static pages (3/3) [21:06:24.446] info - Finalizing page optimization... [21:06:24.450] [21:06:24.468] Route (pages) Size First Load JS [21:06:24.468] ┌ ○ / 588 B 384 kB [21:06:24.469] ├ /_app 0 B 383 kB [21:06:24.469] └ ○ /404 181 B 383 kB [21:06:24.469] + First Load JS shared by all 385 kB [21:06:24.469] ├ chunks/framework-2c79e2a64abdb08b.js 45.2 kB [21:06:24.469] ├ chunks/main-0ecb9ccfcb6c9b24.js 27 kB [21:06:24.469] ├ chunks/pages/_app-00919df5a8e8d19d.js 310 kB [21:06:24.469] ├ chunks/webpack-dcf4136cb4ed4a3e.js 873 B [21:06:24.469] └ css/d82a2870bdb991fe.css 1.44 kB [21:06:24.469] [21:06:24.469] ○ (Static) automatically rendered as static HTML (uses no initial props) [21:06:24.469] [21:06:24.668] Collected static files (public/, static/, .next/static): 3.191ms [21:06:24.687] Build Completed in /vercel/output [30s] [21:06:24.782] Deploying outputs... [21:06:24.783] Injected Vercel Toolbar into the build output, you can disable this in your project settings. [21:06:25.791] [21:06:26.064] Deployment completed [21:06:33.074] Uploading build cache [96.75 MB]... [21:06:34.386] Build cache uploaded: 1.312s Amy Egan (@amyegan) · 2024-07-23 · ♥ 1 Hey @kalchaqui. I'm not sure what you mean by "everything shows up out of place". Is the CSS not applying as you expect on the deployed site? Is it the file structure that seems wrong? If you can share a screenshot, that would help me see what you're seeing. :pray: Kalcha (@kalchaqui) · 2024-07-23 [quote="amyegan, post:2, topic:282"] Hey @kalchaqui. I’m not sure what you mean by “everything shows up out of place”. Is the CSS not applying as you expect on the deployed site? Is it the file structure that seems wrong? If you can share a screenshot, that would help me see what you’re seeing [/quote] Yes! Is it the file structure that seems wrong, All the CSS that it applies is fine because I can correctly see everything in order in terminal port:3000 Everything is perfect! But when I take him to Vercel, everything changes. in the firs image is rigth, it show me the vscode  but en the second image, it show me vercel.  Pauline P. Narvas (@pawlean) · 2024-07-23 · ♥ 1 Could it be related to how you set up your [**Root Directory**](https://vercel.com/docs/deployments/configure-a-build#root-directory)?  Kalcha (@kalchaqui) · 2024-07-23 Could the error be here, in the location? this is my github  https://github.com/Kalchaqui/Project-X- Kalcha (@kalchaqui) · 2024-07-23 Excuse me, what do you recommend I do? Could it be something to do with the project's CSS or something to do with misplaced folders? Amy Egan (@amyegan) · 2024-07-23 · ♥ 1 Thanks for sharing the repo. It looks like the files are all there, but some styles are being excluded from the deployed version when compared with the local build I tried. There may be something wrong with the Tailwind/PostCSS configuration causing it to exclude more than it should. Kalcha (@kalchaqui) · 2024-07-23 Sorry, I don't understand what I have to do, because if when I run the program I see it fine, I don't understand what I could change to make it look bad later in Vercel. Surely something is wrong, but I don't know what it is, otherwise I will try to do everything again. Gilberts Ahumada (@teterabob) · 2024-07-23 · ♥ 3 This is your tailwind config file. Your "componentes" folder is actually called "Components", also the folder "Context". Rename both as "components" and "context", that should solve the problem. In case git doesn't recognize your changes, try this out `git config core.ignorecase false` ``` module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", // Or if using `src` directory: "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }; ``` Kalcha (@kalchaqui) · 2024-07-23 · ♥ 2 I made the changes you mentioned and it works perfectly!!!!! Thank you so much!!!! :crossed_fingers: :rocket: :rocket: 
