使用 Create React App / CRACO / yarn build 进行 Netlify 部署失败:

Netlify deploy failing with Create React App / CRACO / yarn build:

我使用 Create React App、Tailwind 和 CRACO 构建了一个简单的应用程序 (https://github.com/gsoft-inc/craco), following the instructions here: https://tailwindcss.com/docs/guides/create-react-app 如果相关,该应用程序还使用 Typescript。

然而,我在部署到 Netlify 时不断遇到构建错误 - Failed to load config "react-app" to extend from.

我正在使用默认命令 yarn build,但也尝试过使用 npm run buildCI=' ' npm run build

我也尝试根据其他建议使用命令 yarn add eslint-config-react-app -D 更新 eslint deps,但仍然没有成功。

这是部署日志:

12:19:16 PM: Build ready to start
12:19:18 PM: build-image version: be42e453d6c8f171cc2f654acc29c0a8b60e6d93
12:19:18 PM: build-image tag: v3.7.1
12:19:18 PM: buildbot version: 449a896d650f66a48d6924703527235917156153
12:19:18 PM: Fetching cached dependencies
12:19:18 PM: Failed to fetch cache, continuing with build
12:19:18 PM: Starting to prepare the repo for build
12:19:18 PM: No cached dependencies found. Cloning fresh repo
12:19:18 PM: git clone https://github.com/awenine/gifGrid
12:19:19 PM: Preparing Git Reference refs/heads/master
12:19:20 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'build' versus 'build/' in the Netlify UI
12:19:21 PM: Starting build script
12:19:21 PM: Installing dependencies
12:19:21 PM: Python version set to 2.7
12:19:22 PM: v12.18.0 is already installed.
12:19:23 PM: Now using node v12.18.0 (npm v6.14.4)
12:19:23 PM: Started restoring cached build plugins
12:19:23 PM: Finished restoring cached build plugins
12:19:23 PM: Attempting ruby version 2.7.1, read from environment
12:19:24 PM: Using ruby version 2.7.1
12:19:25 PM: Using PHP version 5.6
12:19:25 PM: Started restoring cached yarn cache
12:19:25 PM: Finished restoring cached yarn cache
12:19:25 PM: Installing yarn at version 1.22.4
12:19:25 PM: Installing Yarn!
12:19:25 PM: > Downloading tarball...
12:19:25 PM: [1/2]: https://yarnpkg.com/downloads/1.22.4/yarn-v1.22.4.tar.gz --> /tmp/yarn.tar.gz.feJPvA3wGo
12:19:25 PM:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
12:19:25 PM:                                  Dload  Upload   Total   Spent    Left  Speed
12:19:25 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
12:19:25 PM: 100    79  100    79    0     0    365      0 --:--:-- --:--:-- --:--:--   365
12:19:25 PM: 100    93  100    93    0     0    105      0 --:--:-- --:--:-- --:--:--   105
12:19:26 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
12:19:26 PM: 100   625  100   625    0     0    547      0  0:00:01  0:00:01 --:--:--  4032
12:19:26 PM: 100 1215k  100 1215k    0     0   799k      0  0:00:01  0:00:01 --:--:--  799k
12:19:26 PM: [2/2]: https://yarnpkg.com/downloads/1.22.4/yarn-v1.22.4.tar.gz.asc --> /tmp/yarn.tar.gz.feJPvA3wGo.asc
12:19:26 PM: 100    83  100    83    0     0    951      0 --:--:-- --:--:-- --:--:--   951
12:19:26 PM: 100    97  100    97    0     0    495      0 --:--:-- --:--:-- --:--:--   495
12:19:26 PM: 100   629  100   629    0     0   2784      0 --:--:-- --:--:-- --:--:--  2784
12:19:26 PM: 100  1028  100  1028    0     0   4315      0 --:--:-- --:--:-- --:--:--  4315
12:19:26 PM: > Verifying integrity...
12:19:26 PM: gpg: Signature made Mon 09 Mar 2020 03:52:13 PM UTC using RSA key ID 69475BAA
12:19:26 PM: gpg: Good signature from "Yarn Packaging <yarn@dan.cx>"
12:19:26 PM: gpg: WARNING: This key is not certified with a trusted signature!
12:19:26 PM: gpg:          There is no indication that the signature belongs to the owner.
12:19:26 PM: Primary key fingerprint: 72EC F46A 56B4 AD39 C907  BBB7 1646 B01B 86E5 0310
12:19:26 PM:      Subkey fingerprint: 6D98 490C 6F1A CDDD 448E  4595 4F77 6793 6947 5BAA
12:19:26 PM: > GPG signature looks good
12:19:26 PM: > Extracting to ~/.yarn...
12:19:26 PM: > Adding to $PATH...
12:19:27 PM: > Successfully installed Yarn 1.22.4! Please open another terminal where the `yarn` command will now be available.
12:19:27 PM: Started restoring cached node modules
12:19:27 PM: Finished restoring cached node modules
12:19:27 PM: Installing NPM modules using Yarn version 1.22.4
12:19:28 PM: yarn install v1.22.4
12:19:28 PM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
12:19:28 PM: [1/4] Resolving packages...
12:19:29 PM: [2/4] Fetching packages...
12:19:54 PM: info fsevents@2.3.2: The platform "linux" is incompatible with this module.
12:19:54 PM: info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
12:19:54 PM: info fsevents@1.2.13: The platform "linux" is incompatible with this module.
12:19:54 PM: info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
12:19:54 PM: [3/4] Linking dependencies...
12:19:54 PM: warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
12:20:09 PM: [4/4] Building fresh packages...
12:20:10 PM: success Saved lockfile.
12:20:10 PM: Done in 42.19s.
12:20:10 PM: NPM modules installed using Yarn
12:20:10 PM: Started restoring cached go cache
12:20:10 PM: Finished restoring cached go cache
12:20:10 PM: go version go1.14.4 linux/amd64
12:20:10 PM: go version go1.14.4 linux/amd64
12:20:10 PM: Installing missing commands
12:20:10 PM: Verify run directory
12:20:12 PM: ​
12:20:12 PM: ────────────────────────────────────────────────────────────────
12:20:12 PM:   Netlify Build                                                 
12:20:12 PM: ────────────────────────────────────────────────────────────────
12:20:12 PM: ​
12:20:12 PM: ❯ Version
12:20:12 PM:   @netlify/build 10.2.3
12:20:12 PM: ​
12:20:12 PM: ❯ Flags
12:20:12 PM:   deployId: 606d95348e139e000844b80d
12:20:12 PM: ​
12:20:12 PM: ❯ Current directory
12:20:12 PM:   /opt/build/repo
12:20:12 PM: ​
12:20:12 PM: ❯ Config file
12:20:12 PM:   No config file was defined: using default values.
12:20:12 PM: ​
12:20:12 PM: ❯ Context
12:20:12 PM:   production
12:20:12 PM: ​
12:20:12 PM: ────────────────────────────────────────────────────────────────
12:20:12 PM:   1. Build command from Netlify app                             
12:20:12 PM: ────────────────────────────────────────────────────────────────
12:20:12 PM: ​
12:20:12 PM: $ yarn build
12:20:12 PM: yarn run v1.22.4
12:20:12 PM: $ craco build
12:20:15 PM: Creating an optimized production build...
12:20:33 PM: Failed to compile.
12:20:33 PM: 
12:20:33 PM: Failed to load config "react-app" to extend from.
12:20:33 PM: Referenced from: /opt/build/repo/package.json
12:20:33 PM: error Command failed with exit code 1.
12:20:33 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
12:20:33 PM: ​
12:20:33 PM: ────────────────────────────────────────────────────────────────
12:20:33 PM:   "build.command" failed                                        
12:20:33 PM: ────────────────────────────────────────────────────────────────
12:20:33 PM: ​
12:20:33 PM:   Error message
12:20:33 PM:   Command failed with exit code 1: yarn build
12:20:33 PM: ​
12:20:33 PM:   Error location
12:20:33 PM:   In Build command from Netlify app:
12:20:33 PM:   yarn build
12:20:33 PM: ​
12:20:33 PM:   Resolved config
12:20:33 PM:   build:
12:20:33 PM:     command: yarn build
12:20:33 PM:     commandOrigin: ui
12:20:33 PM:     environment:
12:20:33 PM:       - REACT_APP_GIPHY_API_KEY
12:20:33 PM:     publish: /opt/build/repo/build
12:20:34 PM: Caching artifacts
12:20:34 PM: Started saving node modules
12:20:34 PM: Finished saving node modules
12:20:34 PM: Started saving build plugins
12:20:34 PM: Finished saving build plugins
12:20:34 PM: Started saving yarn cache
12:20:34 PM: Finished saving yarn cache
12:20:34 PM: Started saving pip cache
12:20:34 PM: Finished saving pip cache
12:20:34 PM: Started saving emacs cask dependencies
12:20:34 PM: Finished saving emacs cask dependencies
12:20:34 PM: Started saving maven dependencies
12:20:34 PM: Finished saving maven dependencies
12:20:34 PM: Started saving boot dependencies
12:20:34 PM: Finished saving boot dependencies
12:20:34 PM: Started saving rust rustup cache
12:20:34 PM: Finished saving rust rustup cache
12:20:34 PM: Started saving go dependencies
12:20:34 PM: Finished saving go dependencies
12:20:37 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
12:20:37 PM: Failing build: Failed to build site
12:20:37 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
12:20:37 PM: Finished processing build request in 1m18.82853936s

这是我的 package.json:

{
  "name": "gifgrid",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.1.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "react-tooltip": "^4.2.17",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --quiet"
  },
  "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": {
    "@tailwindcss/postcss7-compat": "^2.0.4",
    "@types/react": "^17.0.3",
    "@typescript-eslint/eslint-plugin": "^4.20.0",
    "@typescript-eslint/parser": "^4.20.0",
    "autoprefixer": "^9.8.6",
    "eslint": "^7.23.0",
    "eslint-config-prettier": "^8.1.0",
    "postcss": "^7.0.35",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4"
  }
}

知道出了什么问题吗?老实说,我不太确定 yarn 和 npm 之间的交互,我知道我最近创建并成功部署了一个类似的应用程序到 Netlify,其中主要构建差异是这个新应用程序使用 Tailwind 和 CRACO。

非常感谢!

我今天遇到了这个问题,并按照 on github 的建议做了 npm install eslint-config-react-app。在控制台建议我安装@babel/core 和 typescript 之后,我通过 npm install @babel/corenpm install typescript

安装了它们
npm WARN @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.13.12 requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

之后我尝试部署,但再次失败,因为我没有 babel-eslint,所以我做了 npm install babel-eslint 然后成功了。

(之前我也做过npm update & npm cache clean --force like 推荐,但我不确定是否有帮助)

可能会有帮助!

更新: 当 eslint 模块不在 devDependencies 中,但在依赖项中时,可能会发生这种情况。我希望有知识的人会批准或反驳这个假设