在代码中包含@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 run build“时，我得到了以下错误

ERROR in Failed to load config "./.config/eslint.config" to extend from.
Referenced from: {project directory}\node_modules\@popperjs\core\package.json

如果我导入另一个第三方库，而不是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

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

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

至

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

eslint-plugin plugin文档说默认情况下node_modules是被排除在外的，所以一定与此有关。