问题由来

项目是需要兼容多端（web、小程序），一些组件和辅助方法使用webpack的mainFileds来区分各端兼容版本，因此一些组件文件夹内有package.json，如以下结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
project
├── src
│   ├── components
│   │   ├── swiper
│   │   │   ├── index.vue
│   │   │   ├── wx.vue
│   │   │   └── package.json
│   │   └── video
│   │       ├── index.vue
│   │       ├── wx.vue
│   │       └── package.json
│   └── pages
├── .eslintrc.js
├── webpack.config.js
└── package.json

另一方面,eslint-import-resolver-webpack在加载webpack.config时，如果配置中的地址不是绝对地址时候，会拼接上packageDir(通过find-root包,找到的当前package.json所在目录)

1
2
3
4
// https://github.com/benmosher/eslint-plugin-import/blob/master/resolvers/webpack/index.js#L342-L344
if (!path.isAbsolute(configPath)) {
  configPath = path.join(packageDir, configPath)
}

而实际定义的webpack.config地址是相对/project/package.json的，这时候就会报出类似的错误。

1
Error resolving webpackConfig { Error: Cannot find module '/xxx/xxx/project/src/pages/components/swiper/webpack.config.js'

此处已经向作者提出issue, 提问“为什么要使用packageDir加入configPath，而不是使用eslint配置的目录”

解决方案

配置绝对地址webpack.config

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// .eslintrc.js
const path = require('path');

module.exports = {
  // ...
  settings: {
    'import/resolver': {
      webpack: {
        // 配置为绝对地址
        config: path.resolve(__dirname, 'shells/web/webpack.config.js'),
      },
    },
  }
};