如何修复React项目中process.binding('http_parser')弃用警告及localhost错误

问题背景 #

执行npm run start时出现两个问题：

1. DNS解析错误：Error: getaddrinfo ENOTFOUND localhost
2. 弃用警告：[DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated

项目依赖配置如下：

{
  "name": "sdfsdf",
  "version": "1.0.0",
  "description": "sdfsdf sdfsdf sdf Lab Website",
  "main": "index.js",
  "scripts": {
    "build": "NODE_ENV=production webpack",
    "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --config ./webpack.config.js",
    "postinstall": "(cd prizes && npm install) ; (cd news && npm install);"
  },
  "repository": {
    "type": "git",
    "url": "git@github.xxx.edu:SeyLab/xxx.xxx.edu.git"
  },
  "license": "Apache-2.0",
  "author": "Wonyoung So <sdfs@sdfsdf.edu> (http://sdfsdf.so)",
  "contributors": [
    "Wonyoung So"
  ],
  "dependencies": {
    "axios": "^0.21.0",
    "d3": "^4.13.0",
    "gsap": "^1.20.3",
    "jquery": "^3.3.1",
    "json-loader": "^0.5.7",
    "jsonp": "^0.2.1",
    "lodash": "^4.17.4",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-addons-shallow-compare": "^15.6.2",
    "react-collapse": "^4.0.3",
    "react-dom": "^16.2.0",
    "react-motion": "^0.5.2",
    "react-onclickoutside": "^6.7.1",
    "react-redux": "^5.0.6",
    "react-retina-image": "^2.0.5",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.36",
    "@babel/plugin-transform-react-jsx": "^7.0.0-beta.36",
    "@babel/preset-env": "^7.0.0-beta.36",
    "babel-loader": "^8.0.0-beta.0",
    "create-react-class": "^15.6.3",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "extracted-loader": "^1.0.3",
    "sass": "^1.26.10",
    "react-cond": "git+https://github.com/dsdfsdfs/react-cond.git",
    "sass-loader": "^7.3.1",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "=2.9.7"
  }
}

启动时错误输出：

npm run start

> senseable_website@1.0.0 start
> NODE_ENV=development ./node_modules/.bin/webpack-dev-server --config ./webpack.config.js

(node:2867) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
node:events:491
      throw er; // Unhandled 'error' event
      ^

Error: getaddrinfo ENOTFOUND localhost
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:111:26)
Emitted 'error' event on Server instance at:
    at GetAddrInfoReqWrap.doListen [as callback] (node:net:1626:12)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:111:17) {
  errno: -3008,
  code: 'ENOTFOUND',
  syscall: 'getaddrinfo',
  hostname: 'localhost'
}

Node.js v18.7.0

修复方案 #

一、解决localhost解析错误 #

方法1：修复hosts文件

• Windows：打开C:\Windows\System32\drivers\etc\hosts（需管理员权限），添加或确认存在以下行：

  127.0.0.1 localhost
  ::1       localhost
  

• macOS/Linux：打开/etc/hosts，添加或确认上述内容，保存后执行sudo dscacheutil -flushcache（macOS）或sudo systemctl restart nscd（Linux）刷新DNS缓存。

方法2：直接指定dev-server的host

修改package.json中的start脚本，强制指定host为127.0.0.1：

"scripts": {
  "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --config ./webpack.config.js --host 127.0.0.1"
}

或者在webpack.config.js的devServer配置中添加：

devServer: {
  host: '127.0.0.1',
  // 其他已有配置...
}

二、解决DEP0111弃用警告 #

该警告源于旧版本webpack-dev-server@2.9.7与Node.js 18不兼容，旧版本依赖了已废弃的process.binding('http_parser')接口，修复方法如下：

方法1：升级webpack-dev-server到兼容版本

由于项目使用webpack@3.10.0，需升级到与之兼容的最高稳定版webpack-dev-server@^3.11.3，执行命令：

npm install webpack-dev-server@^3.11.3 --save-dev

方法2：升级babel相关依赖到稳定版

当前使用的是beta版babel，存在兼容性问题，升级到稳定版：

npm install @babel/core@^7.20.0 @babel/preset-env@^7.20.0 @babel/plugin-transform-react-jsx@^7.19.0 babel-loader@^8.3.0 --save-dev

方法3：临时规避警告（不推荐）

若不想升级依赖，可在启动命令中添加--no-deprecation参数关闭警告：

"scripts": {
  "start": "NODE_ENV=development node --no-deprecation ./node_modules/.bin/webpack-dev-server --config ./webpack.config.js"
}

内容的提问来源于stack exchange，提问作者MW_DEVEL