无法读取未定义的属性 .match（AWS Amplify 构建错误）答案

【问题标题】：Cannot read property .match of undefined (AWS Amplify Build Error)无法读取未定义的属性 .match（AWS Amplify 构建错误）
【发布时间】：2021-03-29 08:04:08
【问题描述】：

我正在尝试使用 Amazon 的 AWS Amplify 部署 React/Typescript 应用程序，但构建不断失败并返回错误，其中包含：“无法读取属性 .match of undefined”

我已经阅读了很多帖子，但每个人都在提出同样愚蠢的“解决方案”来删除包锁。效果不好，不推荐。

我猜 CSS 有问题，但我不确定它到底是什么。以下是项目的依赖项：

    "@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"

这是包含错误的日志块：

2021-03-28T15:00:54.828Z [INFO]: > ****app@0.1.0 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! ****app@0.1.0 build: `craco build`
                                    npm ERR! Exit status 1
                                    npm ERR!
                                    npm ERR! Failed at the ****app@0.1.0 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 ```

【问题讨论】：

您能否将--verbose 标志添加到构建步骤并再次运行并发布日志？
您也可以尝试从放大配置中删除 `cache:paths: - node_modules/**/*` 部分以强制重新安装软件包。
@Christian 我添加了verbose，它仍然显示相同的错误，我不知道从哪里更改放大配置
在左侧的 Amplify -> App Settings -> Build settings。您可以在那里编辑yaml文件（或在本地编辑并向上推）。

标签： reactjs typescript amazon-web-services match craco

【解决方案1】：

找到了解决办法！

原来我使用的是我开始使用的模板中的预制顺风配置文件。

解决方案：我删除了 tailwind 配置文件，并使用 PostCSS 文件制作了一个最小的配置文件： npx tailwindcss init -p

顺风网站甚至建议使用最少的配置，这是有充分理由的。

【讨论】：