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

Posted 2023-03-27

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

【英文标题】：How to fix unexpected Webpack error when including @popperjs/core and eslint in code

【发布时间】：2021-12-05 10:09:25

【问题描述】：

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

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

【参考方案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 默认情况下被排除在外，因此必须与此有关。