基于Heroku：./src/reportWebVitals.js -模块未找到:无法解析/app/src中的“web-vitals”

Question

我在笔记本电脑上使用“npm”。我的应用程序正常工作，然后我部署在Heroku上。它仍然在运行，但是当我访问我的web URL时，这种事情发生了，我不知道为什么(我已经尝试过'npm网络生命周期‘)。

编译失败 ./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

我的package.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"
  }
}

Answer 1

• 首先，它是否在本地工作，因为您的构建部分中有警告？
• 第二，你的国家预防机制已经过时了。使用npm v8
• 第三，更新npm软件包。
• 最后，您缺少了一个Procfile (请参阅此处)

注意:不要使用npm update，因为它不升级package.json。使用npx npm-check -u