(edited)
I have recently started a project using the npm create vite@latest my-project -- -- template react as stated in the https://vite.dev/guide/. So far I have been doing well with the project in development running in localhost. However, when I now tried to deploy it in Vercel, it is showing errors on deployment. I don't know what type of settings do I need to put in the vercel deployment page or if it has something with my config files in my project.
Here are the config files in my project:
\vite.config.js
import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';
export default defineConfig({ plugins: [react()],});postcss.config.js
export default { plugins: { tailwindcss: {}, autoprefixer: {}, ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}), },};\package.json
{ "name": "my-project", "private": true, "version": "1.0.0", "description": "Somethng", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "repository": { "type": "git", "url": "git-repo" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.6.0", "@fortawesome/free-brands-svg-icons": "^6.6.0", "@fortawesome/free-regular-svg-icons": "^6.6.0", "@fortawesome/free-solid-svg-icons": "^6.6.0", "@fortawesome/react-fontawesome": "^0.2.2", "@lordicon/react": "^1.10.0", "aos": "^2.3.4", "axios": "^1.7.7", "js-cookie": "^3.0.5", "lottie-web": "^5.12.2", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.1", "react-router-dom": "^6.26.2", "react-scroll": "^1.9.0", "react-svg": "^16.1.34", "sweetalert2": "^11.14.2" }, "devDependencies": { "@eslint/js": "^9.11.1", "@types/node": "^22.7.5", "@types/react": "^18.3.10", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.2", "autoprefixer": "^10.4.20", "eslint": "^9.11.1", "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.12", "globals": "^15.9.0", "postcss": "^8.4.47", "tailwindcss": "^3.4.13", "vite": "^5.4.8" }}\eslint.config.js
import js from '@eslint/js';import globals from 'globals';import react from 'eslint-plugin-react';import reactHooks from 'eslint-plugin-react-hooks';import reactRefresh from 'eslint-plugin-react-refresh';
export default [ { ignores: ['dist'] }, { files: ['**/*.{js,jsx}'], languageOptions: { ecmaVersion: 2020, globals: { ...globals.browser, process: 'readonly', }, parserOptions: { ecmaVersion: 'latest', ecmaFeatures: { jsx: true }, sourceType: 'module', }, }, settings: { react: { version: '18.3' } }, plugins: { react, 'react-hooks': reactHooks, 'react-refresh': reactRefresh, }, rules: { ...js.configs.recommended.rules, ...react.configs.recommended.rules, ...react.configs['jsx-runtime'].rules, ...reactHooks.configs.recommended.rules, 'react/jsx-no-target-blank': 'off', 'react-refresh/only-export-components': [ 'warn', { allowConstantExport: true }, ], }, },];Here is the error I am getting in the deployment in vercel:
[15:05:48.597] Running build in Washington, D.C., USA (East) – iad1[15:05:49.009] Cloning gitlab.com/lng-athens/webportfolio-admin (Branch: master, Commit: eb0abe8)[15:05:49.379] Previous build cache not available[15:05:49.939] Cloning completed: 933.029ms[15:05:50.278] Running "vercel build"[15:05:51.460] Vercel CLI 37.12.0[15:05:52.227] Running "install" command: `npm install`...[15:06:17.402] [15:06:17.402] added 386 packages, and audited 387 packages in 25s[15:06:17.403] [15:06:17.403] 128 packages are looking for funding[15:06:17.403] run `npm fund` for details[15:06:17.407] [15:06:17.408] 1 low severity vulnerability[15:06:17.408] [15:06:17.408] To address all issues (including breaking changes), run:[15:06:17.408] npm audit fix --force[15:06:17.408] [15:06:17.409] Run `npm audit` for details.[15:06:17.825] [15:06:17.826] > admin@1.0.0 build[15:06:17.826] > vite build[15:06:17.826] [15:06:18.085] [36mvite v5.4.10 [32mbuilding for production...[36m[39m[15:06:18.141] transforming...[15:06:18.409] node:internal/process/promises:391[15:06:18.409] triggerUncaughtException(err, true /* fromPromise */);[15:06:18.410] ^[15:06:18.411] [15:06:18.411] [Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /vercel/path0): [Error] Loading PostCSS Plugin failed: Cannot find module 'cssnano'[15:06:18.411] Require stack:[15:06:18.411] - /vercel/path0/postcss.config.js[15:06:18.411] [15:06:18.411] (@/vercel/path0/postcss.config.js)[15:06:18.411] Error: Loading PostCSS Plugin failed: Cannot find module 'cssnano'[15:06:18.411] Require stack:[15:06:18.416] - /vercel/path0/postcss.config.js[15:06:18.416] [15:06:18.416] (@/vercel/path0/postcss.config.js)[15:06:18.416] at load (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:33631:11)[15:06:18.416] at file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:33656:16[15:06:18.417] at Array.map (<anonymous>)[15:06:18.417] at plugins (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:33655:8)[15:06:18.417] at processResult (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:33725:14)[15:06:18.417] at file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:33855:14][15:06:18.417] [15:06:18.417] Node.js v20.18.0[15:06:18.435] Error: Command "npm run build" exited with 1[15:06:18.656] I hope someone could help me.