create-react-app 启动时出现“编译失败”错误

Question

我在使用npm start打开create-react-app时遇到以下错误。我是React的新手，在过去的几天中，通过命令行创建新应用程序时没有任何问题。

我尝试了npx start、npm start和重新安装npm以获取更新版本，但问题依旧存在。

Failed to compile
./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
BrowserslistError: Unknown browser query `android all`. Maybe you are using old Browserslist or made typo in query.
    at Array.reduce (<anonymous>)
    at Array.some (<anonymous>)
    at Array.filter (<anonymous>)

- DGB

---

该消息告诉您，您的CSS无法编译。查看您的index.css文件，找出其中的问题所在。 - dwjohnston

我刚刚安装了一个全新的create-react-app，但是我仍然得到相同的错误消息。 - Orhan

Answer 1

这是BrowserList中的一个新错误。

在create-react-app和browserlist中都有关于此问题的新报告：https://github.com/facebook/create-react-app/issues/7239以及https://github.com/browserslist/browserslist/issues/382#issuecomment-502991170

如John Forbes所建议，在GitHub问题中给出的解决方法是更改package.json中的browserslist条目。

"browserslist": []

这将构建并运行项目。

- Orhan

---

在 Github 的问题页面上提供的解决方法是将 package.json 文件中的 browserslist 条目更改为 "browserslist": []。 - John Forbes

Answer 2

作为临时解决方案，直到修复该bug： 在package.json中添加以下内容：

  "resolutions": {
    "browserslist": "4.6.2",
    "caniuse-lite": "1.0.30000974"
  },

- AxaZol

---

npm是否支持“resolutions”？还是只有yarn支持？ - gaurav5430

Answer 3

我尝试更新了 browserlist 然后执行了以下操作。

1. 在 package.json 文件中删除此部分。

    "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],

2. 运行 npm start

3. 会询问是否要继续，选择yes

问题解决！

- front_end

Answer 4

目前您可以尝试这样做，并等待进一步的修复。

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [  
    ]
  }

- Lâm Nguyễn

Answer 5

我可以确认，强制使用caniuse-lite@1.0.30000974版本的yarn解决了这个错误。这一定是最新的caniuse-lite@1.0.30000975版本存在问题。

临时解决方案：

在 package.json 文件中添加以下内容：

"resolutions": { "browserslist": "4.6.2", "caniuse-lite": "1.0.30000974" },

这种方法解决了我的问题。

- sandeep mannepalli