解决VuePress中的”Error from chokidar : Error: EBUSY“问题

.title { padding: 10px; background-color: rgba(3, 169, 244, 1); font-size: 16px; color: rgba(255, 255, 255, 1) }

问题及背景

最近在现有Vue2项目中引入VuePress文档工具，编写基于ElementUI的组件文档。结果出现了诡异的”Error from chokidar (D:\): Error: EBUSY: resource busy or locked, lstat 'D:\pagefile.sys'报错。

从报错信息看不出任何有帮助的提示，参考网上的方法删除重装node_modules，问题依旧。

初始代码：

// enhanceApp.js
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
//import { Button } from 'element-ui'; // 单独引入同样报错

export default async ({
  Vue
}) => {
  Vue.use(ElementUI, {size: 'mini'});
}

报错信息：

success [14:16:24] Build 59369a finished in 4897 ms!
> VuePress dev server listening at http://localhost:8080/
Error from chokidar (D:\): Error: EBUSY: resource busy or locked, lstat 'D:\pagefile.sys'

问题排查

尝试将文档独立为一个新项目，则没有问题。于是考虑是依赖冲突问题，但具体是哪个依赖则不得而知。

于是只能排除法一个个组件测试。

// enhanceApp.js
import Alert from 'element-ui/lib/alert.js';
import Aside from 'element-ui/lib/aside.js';
import Autocomplete from 'element-ui/lib/autocomplete.js';
import Avatar from 'element-ui/lib/avatar.js';
import Backtop from 'element-ui/lib/backtop.js';
//中间省略。。
import Backtop from 'element-ui/lib/upload.js';

最终发现在引入 “form-item.js”组件时问题出现，其它组件则没有问题。

于是深入form-item代码内部继续排查，同时联想之前看过的文章，确定了冲突的依赖“async-validator”。

/***/ 49:
/***/ (function(module, exports) {

module.exports = require("async-validator");

/***/ }),

从elementUI看到依赖版本为1.8.1

"dependencies": {
    "async-validator": "~1.8.1",
    //省略
}

在项目中将其指定到1.11即可，至此问题解决。可以愉快地完整引用elementui了。

// 项目package.json
"dependencies": {
    "async-validator": "^1.11.5"",
}

总结

排除法找到有问题的依赖为"async-validator"，通过指定为高版本即可解决问题。但之前的报错信息跟问题原因看起来简直毫无关系，不得不提醒大家注意保持平常心，这非常重要。：）