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

I am having a problem with @popperjs/core not working in my normal javascript environment.

Here is some code that demos my problem

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"],
      },
    ],
  }
};

When I run "npm run build" I get the following error

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

If I were to import another 3rd party library instead of @popperjs/core in index.js and run "npm run build" no errors are displayed, the code is correctly transpiled and put in a file called main.bundle.js which is found in the dist folder. I would expect exactly the same to happen with @popperjs/core. So my question is is it possible to change something so that I can import @popperjs/core and get the same behaviour as you get with other libraries. The problem appears to be to do with ESLint. I would ideally like to keep ESLint because it is obviously a very useful tool in development.

When researching the problem I came across this link https://github.com/popperjs/popper-core/issues/1105 which appears to describe a problem similar to mine. However I can't see how I would apply the solutions given my set up.

CodePudding user response：

Strangely the solution appears to be to remove node_modules from the eslint-webpack-plugin options. I.e. change

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

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

The eslint-webpack-plugin docs say that node_modules are excluded by default so must be something to do with that.