I have built a simple app using Create React App, Tailwind and CRACO (https://github.com/gsoft-inc/craco), following the instructions here: https://tailwindcss.com/docs/guides/create-react-app The app also uses Typescript if thats relevant.
However I keep getting build errors when deploying to Netlify - Failed to load config "react-app" to extend from.
I am using the default command yarn build but have also tried with npm run build and CI=' ' npm run build
I have also tried updating the eslint deps based on other advice using the command yarn add eslint-config-react-app -D but still no luck.
Here is the deploy log:
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 <[email protected]>"
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 [email protected]: The platform "linux" is incompatible with this module.
12:19:54 PM: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
12:19:54 PM: info [email protected]: The platform "linux" is incompatible with this module.
12:19:54 PM: info "[email protected]" 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/[email protected]" 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
and here is my 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"
}
}
Any idea whats going wrong? To be honest im not really sure about the interaction between yarn and npm, I do know that I created and successfully deployed a similar app to Netlify recently where the main build difference was this new one uses Tailwind and CRACO.
Much appreciated!
I had this problem today and did npm install eslint-config-react-app like on github is recommended. After that console adviced me to install @babel/core and typescript, so i installed them by npm install @babel/core and npm install typescript
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] 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.
After that I tried to deploy but it failed againt because I didn't have babel-eslint, so I did npm install babel-eslint and then it worked.
(before i also did npm update & npm cache clean --force like here on stackoverflow is recommended, but I'm not sure if it helped)
May be that will help!
UPDATE: May be that happens when eslint modules are not in devDependencies, but in dependencies. I hope somebody with good knowledges will approve or refute this assumption