在代码中包含 @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 运行 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 和运行 "npm 运行 build" 中导入另一个第 3 方库而不是 @popperjs/core 则不会显示错误，代码被正确转译并放入名为 main.bundle.js 的文件中，该文件位于 dist 文件夹中。我希望 @popperjs/core 会发生完全相同的情况。所以我的问题是是否可以更改某些内容以便我可以导入 @popperjs/core 并获得与其他库相同的行为。问题似乎与 ESLint 有关。理想情况下，我希望保留 ESLint，因为它显然是开发中非常有用的工具。

在研究这个问题时，我遇到了这个 link https://github.com/popperjs/popper-core/issues/1105 ，它似乎描述了一个类似于我的问题。但是，我看不出如何应用我的设置中的解决方案。

Answer 1

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

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

至

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

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

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

How to fix unexpected Webpack error when including @popperjs/core and eslint in code

javascript

eslint

webpack

babel-loader

popper.js