Recently I discovered a new build tool 'craco'.
[Create React App Config Override].
Craco allows you to customize create react app without ejecting (Adding less for those super convenient cascading stylesheets anyone?). This meant new things were possible with create react app which wouldn't previously have been possible without making some sacrifices.
For example:
-sacrificing future dependency update coverage
-donating the time and energy for some serious research and custom configurations to the webpack setup/ other cogs and pulleys cra takes care of for us.
From my understanding ejecting a create react app means losing all future automatic updates to your application's dependencies. The future automatic updates thing doesnt sound too terribly bad, more of a headache and a development time tax I'd prefer not to pay. Just another thing in the back of my mind taking up space. I feel like a few scripts might be written to update thwm on your own. I mean you know the scripts exist out there already. How else are the updates pushed out to us currently. Its just taking time to find them or create your own versions.
I digress...
Adding 'LESS' to my react application sounds like a winning idea and when I bumped into this craco thing wandering through the interwebs one weekend I was all for giving it a try.
As with all of my web adventures ... there were some bumpy roads ahead.
While converting my Netlify Deployment from an npm create react app to a craco create react app, I ran into some hangups.
The following writeup will hopefully shed some light on your dark situation and save you some time and build hours on the console.
here goes...
key |
_______________________________________________|
TLDR
Netlify Build Settings UI
package.json
netlify.toml
errors
TLDR |
_______________________________________________|
This was the solution:
|-------------------|--------------------|
| Base directory | ./ |
| Build command | CI= npm run build |
| Publish directory | ./build |
|-------------------|--------------------|
Netlify UI Build Settings UI |
_______________________________________________|
My problem was in the Netlify Build Settings UI.
I was incorrectly using UI= craco build for my build script. Netlify's build-bot didn't recognize the craco dependency. It does however recognize yarn or npm.
The final correct build step configuration was to just stick with 'npm run build' and have that call 'craco build', "underneath the hood".
Invalid Configuration:
|-------------------|--------------------|
| Base directory | ./ |
| Build command | CI= craco build |
| Publish directory | ./build |
|-------------------|--------------------|
- isnt recognized by the build-bot
Valid Configuration:
|-------------------|--------------------|
| Base directory | ./ |
| Build command | CI= npm run build |
| Publish directory | ./build |
|-------------------|--------------------|
- but is recognized
package.json scripts |
_______________________________________________|
- simply replace all "react-scripts" with "craco" at least the start, build, & test scripts
- "react-scripts start" would become "craco start"
e.g.:
"scripts": {
"start": "craco start",
"build": "craco build",
"start:proxy": "REACT_APP_PROXY=true craco start",
"test": "craco test --env=jest-environment-jsdom-sixteen",
"eject": "react-scripts eject",
"prettier": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
"coverage": "npm test -- --coverage --watchAll=false",
"lint": "eslint 'src/**/*.{js,jsx}' --fix",
"format": "prettier --write 'src/**/*.{js,jsx,css,scss}'",
"storybook": "start-storybook",
"deploy-storybook": "storybook-to-ghpages"
},
netlify.toml to allow react router redirects|
_______________________________________________|
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
errors from Netlify Build Logs |
_______________________________________________|
11:27:54 AM: $ CI=craco build
11:27:54 AM: bash: build: command not found
11:27:54 AM:
11:27:54 AM: ────────────────────────────────────────────────────────────────
11:27:54 AM: "build.command" failed
11:27:54 AM: ────────────────────────────────────────────────────────────────
11:27:54 AM:
11:27:54 AM: Error message
11:27:54 AM: Command failed with exit code 127: CI=craco build
11:27:54 AM:
11:27:54 AM: Error location
11:27:54 AM: In Build command from Netlify app:
11:27:54 AM: CI=craco build
11:27:54 AM:
11:27:54 AM: Resolved config
11:27:54 AM: build:
11:27:54 AM: command: CI=craco build
11:27:54 AM: commandOrigin: ui
11:27:54 AM: environment:
11:27:54 AM: - REACT_APP_CLIENT_ID
11:27:54 AM: - REACT_APP_GOOGLE_API
11:27:54 AM: - REACT_APP_HEREAPI
11:27:54 AM: - REACT_APP_MAPBOX_TOKEN
11:27:54 AM: - REACT_APP_PS_ID
11:27:54 AM: - SKIP_PREFLIGHT_CHECK
11:27:54 AM: redirects:
11:27:55 AM: - from: /*
status: 200
to: /index.html
Caching artifacts
7:32:03 PM: ────────────────────────────────────────────────────────────────
7:32:03 PM: 1. Build command from Netlify app
7:32:03 PM: ────────────────────────────────────────────────────────────────
7:32:03 PM:
7:32:03 PM: $ craco build
7:32:05 PM: Creating an optimized production build...
7:33:26 PM: Failed to compile.
7:33:26 PM:
7:33:26 PM: src/redux/reducers/rootReducer.js
7:33:26 PM: Line 28:37: Missing semicolon semi
7:33:26 PM: Line 36:38: Missing semicolon semi
7:33:26 PM: src/route_views/discover/searchlistings/listings/ListingCard.js
7:33:26 PM: Line 48:73: Missing semicolon semi
7:33:26 PM: src/route_views/discover/searchlistings/listings/SingleListingView.js
7:33:26 PM: Line 3:72: Missing semicolon semi
7:33:26 PM: Line 7:53: Missing semicolon semi
7:33:26 PM: Line 8:25: Missing semicolon semi
7:33:26 PM: Line 9:22: Missing semicolon semi
7:33:26 PM: Line 11:33: Missing semicolon semi
7:33:26 PM: src/route_views/discover/suggested_listings/SuggestedListings.js
7:33:26 PM: Line 38:23: Missing semicolon semi
7:33:26 PM: src/utils/CalendarRangePicker.js
7:33:26 PM: Line 15:3: Missing semicolon semi
7:33:26 PM: Line 16:91: Missing semicolon semi
7:33:26 PM: Line 20:27: Missing semicolon semi
7:33:26 PM: Search for the keywords to learn more about each error.
7:33:26 PM:
7:33:26 PM: ────────────────────────────────────────────────────────────────
7:33:26 PM: "build.command" failed
7:33:26 PM: ────────────────────────────────────────────────────────────────
7:33:26 PM:
7:33:26 PM: Error message
7:33:26 PM: Command failed with exit code 1: craco build
7:33:26 PM:
7:33:26 PM: Error location
7:33:26 PM: In Build command from Netlify app:
7:33:26 PM: craco build
7:33:26 PM:
7:33:26 PM: Resolved config
7:33:26 PM: build:
7:33:26 PM: command: craco build
7:33:26 PM: commandOrigin: ui
7:33:26 PM: environment:
7:33:26 PM: - REACT_APP_CLIENT_ID
7:33:26 PM: - REACT_APP_GOOGLE_API
7:33:26 PM: - REACT_APP_HEREAPI
7:33:26 PM: - REACT_APP_MAPBOX_TOKEN
7:33:26 PM: - REACT_APP_PS_ID
7:33:26 PM: redirects:
7:33:26 PM: - from: /*
status: 200
to: /index.html
Caching artifacts
Top comments (0)