我在笔记本电脑上使用'npm start'。我的app工作正常，然后我在Heroku上部署。它还在运行，但是当我去到我的web URL时，这个事情发生了，我不知道为什么(我试过'npm I web-vital ')。
编译失败
./src/reportWebVitals.js
模块未找到:无法解析'/app/src'中的'web-vitals'
构建日志:
-----> Building on the Heroku-20 stack
-----> Using buildpack: https://github.com/heroku/heroku-buildpack-nodejs#latest
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 14.x
engines.npm (package.json): 6.x
Resolving node version 14.x...
Downloading and installing node 14.18.1...
Bootstrapping npm 6.x (replacing 6.14.15)...
npm 6.x installed
-----> Restoring cache
- node_modules
-----> Installing dependencies
Installing node modules (package.json)
audited 2027 packages in 15.921s
156 packages are looking for funding
run `npm fund` for details
found 25 vulnerabilities (6 moderate, 18 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build
Running build
> my-genshin-web@0.1.0 build /tmp/build_69217e56
> react-scripts build
Creating an optimized production build...
Compiled with warnings.
src/App.js
Line 22:10: 'checklogin' is assigned a value but never used no-unused-vars
Line 24:13: Effect callbacks are synchronous to prevent race conditions. Put the async function inside:
useEffect(() => {
async function fetchData() {
// You can await here
const response = await MyAPI.getData(someId);
// ...
}
fetchData();
}, [someId]); // Or [] if effect doesn't need props or state
Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching react-hooks/exhaustive-deps
src/ItemDetail.js
Line 10:18: 'setItem' is assigned a value but never used no-unused-vars
Line 21:8: React Hook useEffect has a missing dependency: 'rescipe'. Either include it or remove the dependency array react-hooks/exhaustive-deps
src/components/AddMovie.js
Line 11:12: 'movies' is assigned a value but never used no-unused-vars
src/components/Contact.js
Line 13:17: <iframe> elements must have a unique title property jsx-a11y/iframe-has-title
src/components/DanhSachSanPham.js
Line 36:8: React Hook useEffect has missing dependencies: 'item' and 'rescipes'. Either include them or remove the dependency array react-hooks/exhaustive-deps
src/components/HomeIntro.js
Line 15:20: 'setGameList' is assigned a value but never used no-unused-vars
src/components/MoviesList.js
Line 8:20: 'setMovies' is assigned a value but never used no-unused-vars
src/components/MyNav.js
Line 45:8: React Hook useEffect has a missing dependency: 'scrollbar'. Either include it or remove the dependency array. You can also do a functional update 'setScrollbar(s => ...)' if you only need 'scrollbar' in the 'setScrollbar' call react-hooks/exhaustive-deps
src/components/NewMovie.js
Line 8:20: 'setMovies' is assigned a value but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
114.54 KB (-226 B) build/static/js/2.85fb8b23.chunk.js
25.14 KB build/static/css/2.eadc512c.chunk.css
11.73 KB (+1.07 KB) build/static/js/main.9797c1e4.chunk.js
6.92 KB (+398 B) build/static/css/main.534e5575.chunk.css
1.73 KB (-1 B) build/static/js/3.3018a0e9.chunk.js
1.17 KB (-1 B) build/static/js/runtime-main.8c150aff.js
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
-----> Caching build
- node_modules
-----> Pruning devDependencies
removed 2 packages and audited 2025 packages in 15.112s
156 packages are looking for funding
run `npm fund` for details
found 25 vulnerabilities (6 moderate, 18 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 97.8M
-----> Launching...
Released v19
https://my-gs-client.herokuapp.com/ deployed to Heroku
包。json文件:
{
"name": "my-genshin-web",
"engines": {
"node": "14.x",
"npm": "6.x"
},
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.15",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"aos": "^2.3.4",
"axios": "^0.21.3",
"bootstrap": "^4.6.0",
"node-pre-gyp": "^0.17.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-ripples": "^2.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"styled-components": "^5.3.0"
},
"scripts": {
"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": {
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"web-vitals": "^2.1.2"
}
}
- 首先，它是否在本地工作，因为在你的构建部分有警告? 第二，你的npm过时了。使用npm v8第三，更新npm包
- 最后，您缺少一个
Procfile(请参阅此处)
注意:不要使用npm update，因为它不会升级package.json。使用npx npm-check -u