如何修复在代码中包含@popperjs/core和eslint时意外的Webpack错误

Question

我有一个问题，@popperjs/core不工作在我的正常javascript环境

下面的代码演示了我的问题

index.js

import { createPopper } from '@popperjs/core';
console.log("Hello world!");

package.json

{
"name": "popperjsproblem",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"dependencies": {
"@popperjs/core": "^2.10.2"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/preset-env": "^7.15.8",
"@babel/eslint-parser": "^7.15.8",
"babel-loader": "^8.2.2",
"eslint": "^8.0.1",
"eslint-import-resolver-webpack": "^0.13.1",
"eslint-webpack-plugin": "^3.0.1",
"eslint-plugin-import": "^2.20.0",
"webpack": "^5.58.2",
"webpack-cli": "^4.9.0"
},
"babel": {
"presets": [
"@babel/preset-env"
]
},
"eslintConfig": {
"extends": [
"eslint:recommended"
],
"root":true,
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"no-debugger": "off",
"no-console": "off",
"no-unused-vars": "warn"
},
"settings": {
"import/resolver": "webpack"
}
}
}

webpack.config.js

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const esLintLoaderOptions = {
extensions: [`js`, `jsx`],
exclude: [
`/node_modules/`
]
};
module.exports = {
entry: "./index.js", 
mode: "development",
target:"web",
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/dist/",
},
stats: {
colors: true,
},
devtool: "cheap-module-source-map",  
plugins: [   
new ESLintPlugin(esLintLoaderOptions)
],
module: {
rules: [
{
test: /.js$/, 
exclude: /node_modules/, 
use: ["babel-loader"],
},
],
}
};

当我运行"npm运行"我得到以下错误

ERROR in Failed to load config "./.config/eslint.config" to extend from.
Referenced from: {project directory}[e-mail]

如果我要导入另一个第三方库，而不是在index.js中导入@popperjs/core，然后运行"npm run build"没有错误显示，代码被正确编译并放入dist文件夹中名为main.bundle.js的文件中。我希望@popperjs/core也会发生同样的情况。所以我的问题是是否有可能改变一些东西，这样我就可以导入@popperjs/core并获得与其他库相同的行为。这个问题似乎与ESLint有关。我更愿意保留ESLint，因为它显然是一个非常有用的开发工具。

在研究这个问题时，我遇到了这个链接https://github.com/popperjs/popper-core/issues/1105，它似乎描述了一个类似于我的问题。然而，我不知道如何在我的设置下应用这些解决方案。

Answer 1

奇怪的是，解决方案似乎是从eslint-webpack-plugin选项中删除node_modules。即改变

const esLintLoaderOptions = {
extensions: [`js`, `jsx`],
exclude: [
`/node_modules/`
]
};

const esLintLoaderOptions = {
extensions: [`js`, `jsx`]
};

eslint-webpack-plugin文档说默认情况下node_modules是被排除在外的，所以一定要做点什么。