I've been trying to deploy my create-react-app to vercel but keep getting the following error. Everything works locally and even builds with no errors. How can I fix it? I already tried to get variables on vercel project settings and nothing.
I build with npm run build and do nothing with Yarn, so I don't get it.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > tailwindcss@3.0.23" has unmet peer dependency "autoprefixer@^10.0.2".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
[4/4] Building fresh packages...
Done in 74.94s.
Running "yarn run build"
yarn run v1.22.17
$ react-scripts build
Creating an optimized production build...
Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.
Failed to compile.
src/App.tsx
Line 4:9: 'BrowserRouter' is defined but never used @typescript-eslint/no-unused-vars
Line 4:24: 'Navigate' is defined but never used @typescript-eslint/no-unused-vars
Line 14:8: 'Login' is defined but never used @typescript-eslint/no-unused-vars
src/Components/Content/Message/Message.jsx
Line 5:9: 'Navigate' is defined but never used no-unused-vars
src/Components/Content/Message/MessageInfo/MessageAccounts.jsx
Line 9:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
src/Components/Content/Profile/Profile.jsx
Line 34:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
src/Components/Content/Profile/ProfileInfo/PersonalData.jsx
Line 10:17: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
src/Components/Content/Profile/ProfileInfo/Review.jsx
Line 14:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
Line 20:21: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
src/Components/Content/Users/Usersc.jsx
Line 5:9: 'Navigate' is defined but never used no-unused-vars
Line 27:29: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
src/Components/Header/Header.jsx
Line 4:9: 'NavLink' is defined but never used no-unused-vars
Line 26:25: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
src/Components/Header/HeaderContainer.tsx
Line 15:13: 'axios' is assigned a value but never used @typescript-eslint/no-unused-vars
src/Components/Redux/auth-reducer.ts
Line 69:50: Array.prototype.filter() expects a return value from arrow function array-callback-return
src/Components/Redux/userspage-reducer.ts
Line 1:9: 'HeaderAPI' is defined but never used @typescript-eslint/no-unused-vars
Line 66:130: Expected '!==' and instead saw '!=' eqeqeq
src/Components/Sidebar/Friends/FriendAccount.jsx
Line 9:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
src/Components/Sidebar/Friends/Friends.jsx
Line 6:64: Array.prototype.map() expects a value to be returned at the end of arrow function array-callback-return
src/common/Loading/loading.jsx
Line 7:9: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1`
is't my package.json:
{
"homepage": "https://yefimchuk.github.io/social-network-React",
"name": "first-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd": "^4.18.7",
"axios": "^0.25.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.2",
"react-scripts": "^5.0.0",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"typescript": "^4.5.4",
"web-vitals": "^1.0.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.2.3"
}
}
can anyone help? what is mean and how is't solve?
The answer is in the log:
Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.
Because you're in a CI environment, all ESLint warnings (about code style and stuff) are treated as actual errors, resulting in this:
Failed to compile.
You can temporarily disable ESLint, or just fix all warnings described in the log.