在 Heroku 中部署時，Craco 無法構建 React 應用程序

Question

已經使用了兩天並被難住了..嘗試了我可以在stackoverflow上找到的所有解決方案。 嘗試在 Heroku 上使用順風部署我的 MERN 堆棧應用程序。 似乎 Craco/tailwind 給我帶來了問題。

請問有什么幫助嗎？

“（節點：2326）未處理的PromiseRejectionWarning：錯誤：找不到模塊'tailwindcss'

需要堆棧：

• /tmp/build_1f05e363/frontend/craco.config.js

• /tmp/build_1f05e363/frontend/node_modules/@craco/craco/lib/config.js

• /tmp/build_1f05e363/frontend/node_modules/@craco/craco/scripts/build.js”

下面發布的錯誤構建日志

`

-----> Building on the Heroku-20 stack

-----> Using buildpack: mars/create-react-app

-----> React.js (create-react-app) multi app detected

=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git

=====> Detected Framework: Multipack

=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git

=====> Detected Framework: Node.js

       

-----> Creating runtime environment

       

       NPM_CONFIG_LOGLEVEL=error

       NODE_VERBOSE=false

       NODE_ENV=production

       NODE_MODULES_CACHE=true

       

-----> Installing binaries

       engines.node (package.json):  14.17.5

       engines.npm (package.json):   unspecified (use default)

       

       Resolving node version 14.17.5...

       Downloading and installing node 14.17.5...

       Using default npm version: 6.14.14

       

-----> Restoring cache

       Cached directories were not restored due to a change in version of node, npm, yarn or stack

       Module installation may take longer for this build

       

-----> Installing dependencies

       Installing node modules

       

       > nodemon@2.0.12 postinstall /tmp/build_1f05e363/node_modules/nodemon

       > node bin/postinstall || exit 0

       

       Love nodemon? You can now support the project via the open collective:

        > https://opencollective.com/nodemon/donate

       

       added 269 packages in 8.641s

       

-----> Build

       Running heroku-postbuild

       

       > react-ecommerce@1.0.0 heroku-postbuild /tmp/build_1f05e363

       > NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend

       

       

       > core-js@2.6.12 postinstall /tmp/build_1f05e363/frontend/node_modules/babel-runtime/node_modules/core-js

       > node -e "try{require('./postinstall')}catch(e){}"

       

       

       > core-js@3.16.3 postinstall /tmp/build_1f05e363/frontend/node_modules/core-js

       > node -e "try{require('./postinstall')}catch(e){}"

       

       

       > core-js-pure@3.16.3 postinstall /tmp/build_1f05e363/frontend/node_modules/core-js-pure

       > node -e "try{require('./postinstall')}catch(e){}"

       

       

       > ejs@2.7.4 postinstall /tmp/build_1f05e363/frontend/node_modules/ejs

       > node ./postinstall.js

       

       added 1991 packages from 811 contributors in 51.631s

       

       150 packages are looking for funding

         run `npm fund` for details

       

       

       > frontend@0.1.0 build /tmp/build_1f05e363/frontend

       > craco build

       
`
(node:2326) UnhandledPromiseRejectionWarning: Error: Cannot find module 'tailwindcss'

Require stack:

- /tmp/build_1f05e363/frontend/craco.config.js

- /tmp/build_1f05e363/frontend/node_modules/@craco/craco/lib/config.js

- /tmp/build_1f05e363/frontend/node_modules/@craco/craco/scripts/build.js

    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)

    at Function.Module._load (internal/modules/cjs/loader.js:745:27)

    at Module.require (internal/modules/cjs/loader.js:961:19)

    at require (internal/modules/cjs/helpers.js:92:18)

    at Object.<anonymous> (/tmp/build_1f05e363/frontend/craco.config.js:6:11)

    at Module._compile (internal/modules/cjs/loader.js:1072:14)

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)

    at Module.load (internal/modules/cjs/loader.js:937:32)

    at Function.Module._load (internal/modules/cjs/loader.js:778:12)

    at Module.require (internal/modules/cjs/loader.js:961:19)

(Use `node --trace-warnings ...` to show where the warning was created)

(node:2326) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)

(node:2326) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
`
       

-----> Caching build

       - node_modules

       

-----> Pruning devDependencies

       audited 269 packages in 2.577s

       

       22 packages are looking for funding

         run `npm fund` for details

       

       found 0 vulnerabilities

       

       

-----> Build succeeded!

=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git#v9.0.0

=====> Detected Framework: React.js (create-react-app)

       Writing `static.json` to support create-react-app

       Enabling runtime environment variables

=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git

=====> Detected Framework: Static HTML

-----> Installed nginx 1.19.0 to /app/bin

Using release configuration from last framework (Static HTML).

-----> Discovering process types

       Procfile declares types -> web

-----> Compressing...

       Done: 103.2M

-----> Launching...

       Released v20


`

{
  "name": "frontend",
  "proxy": "http://127.0.0.1:5000",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.2.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-paypal-button-v2": "^2.6.3",
    "react-redux": "^7.2.5",
    "react-router-dom": "^5.2.1",
    "react-scripts": "4.0.3",
    "redux": "^4.1.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco 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": {
    "autoprefixer": "^9.8.7",
    "postcss": "^7.0.38",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.16"
  }
}

我試過卸載 tailwind/postcss/autoprefixer 並將其重新安裝到依賴項，在這種情況下，構建仍然不會完成，並出現 Craco 構建錯誤。

我被難住了 8 小時試圖解決這個問題..

如果我闖入我的 heroku 應用程序：

`    Running bash on ⬢ appName123... up, run.4756 (Free)
    ~ $ dir
    Procfile  README.md  backend  frontend  node_modules  package-lock.json  package.json
    ~ $ cd backend
    ~/backend $ dir
    config  controller  data  middleware  models  routes  seeder.js  server.js  utils
    ~/backend $ cd ..
    ~ $ cd frontend
    ~/frontend $ dir
    craco.config.js  node_modules  package-lock.json  package.json  public  src  tailwind.config.js
    ~/frontend $ exit
    exit
`

沒有構建文件夾。

我嘗試手動安裝：

`~/frontend $ npm run build

> frontend@0.1.0 build /app/frontend
> craco build

(node:81) UnhandledPromiseRejectionWarning: Error: Cannot find module 'tailwindcss'
Require stack:
- /app/frontend/craco.config.js
- /app/frontend/node_modules/@craco/craco/lib/config.js
- /app/frontend/node_modules/@craco/craco/scripts/build.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.Module._load (internal/modules/cjs/loader.js:745:27)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/app/frontend/craco.config.js:6:11)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:81) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:81) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.`

同樣的錯誤..無法構建。

然而，無論是常規依賴還是開發依賴，Tailwind 都可以在本地運行，並且 craco 構建每次都運行良好。 只是在 Heroku 中的部署導致了問題。

我已經指定了 Node 版本，將我的構建包更新為 mars create-react-app .... 沒有其他可以嘗試的了

后端服務器根文件夾中的 package.json

{
  "name": "react-ecommerce",
  "engines": {
    "node": "14.17.5"
  },
  "version": "1.0.0",
  "description": "MERN ecommerce shop",
  "main": "server.js",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "concurrently": "^6.2.1",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "express-async-handler": "^1.1.4",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.0.4",
    "nodemon": "^2.0.12"
  },
  "devDependencies": {},
  "scripts": {
    "server": "nodemon backend/server",
    "client": "npm start --prefix frontend",
    "start": "node backend/server",
    "dev": "concurrently \"npm run server \" \"npm run client \"",
    "data:import": "node backend/seeder",
    "data:delete": "node backend/seeder -d",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
  } 
}

再一次，一切都在本地工作。 即使在沒有 craco run 的情況下以生產模式啟動。 所以路徑似乎沒問題。 Heroku 中的構建會失敗

有什么幫助嗎？

Answer 1

您是否嘗試將“tailwindcss”模塊移動到依賴項而不是開發依賴項？

Answer 2

是的，在我的 VPS 上遇到了同樣的問題，通過刪除它們並重新安裝來解決它：

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9