复制React/Redux项目后出现'async_hooks'模块找不到问题求助

问题背景 #

我是React/Redux新手，复制了一个仍在生产环境运行但依赖过时的旧项目来创建参数不同但版本一致的新项目，修改文本内容后执行npm run build报错，做了以下操作：

• 将package.json中的node-sass版本改为4.11.0，解决了旧版本的"Module not found: Error: Cannot resolve module"错误；
• 删除package-lock.json文件；
• 删除node_modules文件夹；
• 在主分支执行npm install重新生成node_modules。

但现在执行npm run build时出现**"Cannot resolve module 'async_hooks'"**错误，尝试npm install async_hooks、在package.json中添加async-hooks、更新bluebird版本都没用。

完整错误信息 #

Module not found: Error: Cannot resolve module 'async_hooks' in C:\xampp\htdocs\careers\node_modules\bluebird\js\release
 @ ./~/bluebird/js/release/util.js 410:18-40

ERROR in ./~/bluebird/js/release/promise.js
Module not found: Error: Cannot resolve module 'async_hooks' in C:\xampp\htdocs\careers\node_modules\bluebird\js\release
 @ ./~/bluebird/js/release/promise.js 34:4-26

关键配置文件 #

package.json（核心片段）

"main": "index.js",
"repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
  "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
  "build": "node ./node_modules/webpack/bin/webpack.js ",
  "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
  "test:watch": "npm run test -- --watch"
},
"engines": {
  "node": "^v8.9.4"
},
"devDependencies": {
  "babel-core": "^6.2.1",
  "webpack": "~1.12.9",
  "webpack-dev-server": "~1.14.0"
},
"dependencies": {
  "bluebird": "^3.4.1",
  "react": "^0.14.3",
  "react-redux": "~4.3.0"
}

webpack.config.js

var path = require('path');

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname,'./js/'),
    publicPath: '/js/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

解决步骤 #

1. 锁定bluebird兼容版本 #

async_hooks是Node.js 8.x新增的内置模块，但你的webpack 1.x在打包浏览器代码时会尝试解析Node内置模块，而bluebird@3.4.1在Node环境检测逻辑中会引入async_hooks，导致浏览器打包报错。

修改package.json中bluebird的版本为兼容Node 8的稳定版：

"bluebird": "3.5.5"

执行npm install更新依赖。

2. 配置webpack忽略Node内置模块 #

在webpack.config.js中添加node配置项，告诉webpack对浏览器环境不存在的Node内置模块返回空对象：

var path = require('path');

module.exports = {
  // 原有配置不变...
  node: {
    async_hooks: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  // 原有配置不变...
};

3. 清理缓存重新构建 #

执行以下命令清理旧依赖并重新构建：

# Windows环境
rmdir /s /q node_modules && del package-lock.json
# Mac/Linux环境
rm -rf node_modules package-lock.json

npm install
npm run build

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