BrowserslistError:React/Express 应用程序中的未知浏览器查询 `dead`

Posted

技术标签:

【中文标题】BrowserslistError:React/Express 应用程序中的未知浏览器查询 `dead`【英文标题】:BrowserslistError: Unknown browser query `dead` in React/Express App 【发布时间】:2019-03-27 02:30:33 【问题描述】:

当我运行“npm start”时,应用程序启动正常,但“npm run build”在终端中给我以下消息:

> workout_tracker@0.1.0 build /Users/*******/mern-workout/client
> react-scripts build

Creating an optimized production build...
Failed to compile.

./src/Components/UI/Spinner/Spinner.module.css
Module build failed: BrowserslistError: Unknown browser query `dead`
    at Array.forEach (<anonymous>)


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! workout_tracker@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the workout_tracker@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional 
logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/*******/.npm/_logs/2018-10-22T23_21_04_691Z-debug.log

我已经搜索过,但唯一的解决方案似乎是针对使用 Angular 的人,他们的 Bootstrap 版本有问题。我没有在我的应用中使用 Bootstrap。

我尝试从 browserslist 数组中删除“未死”只是为了看看会发生什么,我得到了这个:

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file: 

    ./node_modules/query-string/index.js:8 

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! workout_tracker@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the workout_tracker@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/******/.npm/_logs/2018-10-22T23_41_55_488Z-debug.log

这是我的 package.json 文件:

 
  "name": "workout_tracker",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "axios": "^0.18.0",
    "browserslist": "^4.3.1",
    "cssnano": "^4.1.7",
    "firebase": "^5.3.0",
    "jw-paginate": "^1.0.2",
    "jw-react-pagination": "^1.0.7",
    "normalize.css": "^8.0.0",
    "query-string": "^6.2.0",
    "random-id": "0.0.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-headroom": "^2.2.2",
    "react-icons-kit": "^1.1.6",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts-cssmodules": "^1.1.10",
    "react-swipe-to-delete-component": "^0.3.4",
    "react-swipeout": "^1.1.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  ,
  "devDependencies": 
    "css-loader": "^1.0.0",
    "redux-devtools-extension": "^2.13.5",
    "webpack": "^3.8.1"
  ,
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:4000"

【问题讨论】:

当我尝试对我的应用程序进行生产构建时,我得到了这个。看起来这是 webpack cssloader 的问题。我从我的文件中删除了browserlist,它没有错误地构建。 我的浏览器列表还在。我无法准确回忆起问题所在。我相信我删除了一个最终不需要的依赖项,它需要另一个依赖项的旧版本。 @hsimah,感谢您的解决方案,但是当我们从 package.json 文件中删除对象 browserlist 时,您能否请教它是如何工作的? 【参考方案1】:

使用 React 时,请查看您的 package.json。您可能会发现其中添加了以下内容。

  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]

删除“未死”,并再次运行yarn run build。为我解决了这个问题。

【讨论】:

我使用的是旧版本,但我必须删除以解决此问题的 not dead 行位于名为“browserslist”的文件中。 你是对的..!【参考方案2】:

'dead' 描述出现在较新的版本中。换句话说,'dead' 没有在 ../node_modules/autoprefixer-stylus/node_modules/browserslist/index.js 中定义。

如果你打开上面的 ../browserlist/index.js 文件,你会看到:

var QUERIES = [
  
    regexp: /^last\s+(\d+)\s+major versions?$/i,
    select: function (context, versions) ...
  ,
  ...,
]

您可以在其中添加以下内容:


  regexp: /^dead$/i,
  select: function (context) 
    var dead = ['ie <= 10', 'ie_mob <= 10', 'bb <= 10', 'op_mob <= 12.1']
    return resolve(dead, context)
  

这对我来说很好,无需更改 package-json.lock 中的依赖版本

【讨论】:

迷人的解决方案@rdzcn。我认为您正在与节点人员合作。【参考方案3】:

如果您有另一个使用非常旧的浏览器列表的工具,就会发生这种情况。

致电npm ls,查找使用Browserslist

【讨论】:

问题可能是它使用的依赖项之一。【参考方案4】:

package.json中设置"browserslist": []

【讨论】:

【参考方案5】:

更新autoprefixer已修复:

npm i autoprefixer

【讨论】:

【参考方案6】:

将 css-loader 更新到 1.0.0。如果浏览器列表没有解决问题,它将解决此问题

 npm i css-loader@1.0.0

参考:https://github.com/browserslist/browserslist/issues/266

【讨论】:

【参考方案7】:

刚刚遇到这个问题并解决了。

您的 package.json 文件中有两个 browserlist 条目,默认一个是“production”。这是文本默认的样子:

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

这是添加了 development 参数:

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

    ]
  

这应该可以解决瓶颈。

我相信 React 默认运行生产,并且默认构建命令会阻止构建具有旧依赖项的应用程序(出于安全原因)。

【讨论】:

【参考方案8】:
browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],



 ***ok****
    browserslist": 
        "production": [
          ">0.2%",
          "not op_mini all"
        ],

【讨论】:

删除“未死”,然后 npm run build,尽情享受吧! 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。【参考方案9】:

如果您在 package.json 中没有“Matthis Kohli”回答的代码,只需添加除“未死”部分之外的那些行,它应该看起来像这样

"browserslist": [
  ">0.2%",
  "not ie <= 11",
  "not op_mini all"
]

【讨论】:

你刚刚复制了他的帖子?

以上是关于BrowserslistError:React/Express 应用程序中的未知浏览器查询 `dead`的主要内容,如果未能解决你的问题,请参考以下文章

react

react 常用

react 常用

react_1

React-Error

React构建项目