1

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.

1 Answer 1

2

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/`
  ]
};

to

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.

1
  • I had the same issue with popper and it failed when I added excludes. Since I had not just node_modules, I couldn't just remove it. It seems to work when I don't use the slashes: exclude: ['node_modules','other_dir']
    – Hollul
    Mar 26, 2022 at 1:52

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.