Cannot read property .match of undefined (AWS Amplify Build Error)

Question

I'm trying to deploy a React/Typescript app using Amazon's AWS Amplify but the build keeps failing and returning the error containing: "Cannot read property .match of undefined"

I've read so many threads but everyone keeps suggesting the same stupid "solution" to delete the package-lock. It doesn't work so don't recommend it.

I'm guessing there's something wrong with the CSS but I'm not sure what it is exactly. Here are the dependencies for the project:

    "@craco/craco": "^6.1.1",
    "@fortawesome/fontawesome-free": "^5.15.2",
    "@material-ui/core": "^4.11.3",
    "@popperjs/core": "^2.9.1",
    "@tailwindcss/custom-forms": "^0.2.1",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.3",
    "@types/d3-array": "^2.9.0",
    "@types/d3-scale": "^3.2.2",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.20.4",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.1",
    "@types/react-map-gl": "^5.2.9",
    "aws-amplify": "^3.3.25",
    "aws-sdk": "^2.863.0",
    "chart.js": "^2.9.4",
    "d3-array": "^2.12.0",
    "d3-scale": "^3.2.3",
    "deck.gl": "^8.4.10",
    "elasticsearch": "^16.7.2",
    "gulp": "^4.0.2",
    "gulp-append-prepend": "^1.0.8",
    "http-aws-es": "^6.0.0",
    "mapbox-gl": "^2.1.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-map-gl": "^6.1.10",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.2.2",
    "web-vitals": "^1.1.0" 

And here's the chunk of the log that contains the error:

2021-03-28T15:00:54.828Z [INFO]: > ****[email protected] build /codebuild/output/src407501471/src/****app
                                 > craco build
2021-03-28T15:00:57.092Z [INFO]: Creating an optimized production build...
2021-03-28T15:02:42.696Z [INFO]: Failed to compile.
2021-03-28T15:02:42.698Z [INFO]: ./node_modules/@fortawesome/fontawesome-free/css/all.min.css
                                 TypeError: Cannot read property 'match' of undefined
2021-03-28T15:02:42.754Z [WARNING]: npm
2021-03-28T15:02:42.754Z [WARNING]: ERR! code ELIFECYCLE
                                    npm ERR! errno 1
2021-03-28T15:02:42.756Z [WARNING]: npm
2021-03-28T15:02:42.757Z [WARNING]: ERR! ****[email protected] build: `craco build`
                                    npm ERR! Exit status 1
                                    npm ERR!
                                    npm ERR! Failed at the ****[email protected] build script.
                                    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2021-03-28T15:02:42.762Z [WARNING]: 
2021-03-28T15:02:42.763Z [WARNING]: npm ERR! A complete log of this run can be found ```

Answer 1

Found the solution!

Turns out I was using a pre-made tailwind config file from the template I started with.

SOLUTION: I deleted tailwind config file and made a minimal one with a PostCSS file using: npx tailwindcss init -p

It's even recommended on the tailwind website to use minimal configuration, so that was for a good reason.