ERESOLVE unable to resolve dependency tree

[lucaslgr]

I'm trying to install in a project that uses Vuejs and Webpack, so, I've tried this steps below recommend on README.md:

npm i plain-draggable
cd node_modules/plain-draggable
npm i

and in command:

npm i 

I've got this errors below:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: plain-draggable@2.5.14
npm ERR! Found: babel-core@7.0.0-bridge.0
npm ERR! node_modules/babel-core
npm ERR!   dev babel-core@"^7.0.0-bridge.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer babel-core@"6" from babel-loader@7.1.5
npm ERR! node_modules/babel-loader
npm ERR!   dev babel-loader@"^7.1.5" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\guima\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\guima\AppData\Local\npm-cache\_logs\2021-06-05T20_03_42_369Z-debug.log

I'm not an expert about the versions of Babel, could you help me please ? Thanks in advance

[lucaslgr]

My package.json of root project

 {
  "name": "simulans",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "core-js": "^3.6.5",
    "plain-draggable": "^2.5.14",
    "vue": "^2.6.11",
    "vue-router": "^3.0.3",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "^3.0.5",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "electron": "^13.0.1",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.2.1",
    "vue-cli-plugin-electron-builder": "~2.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/prettier"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "prettier/prettier": 0
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

[anseki]

Hi @lucaslgr, thank you for the comment. Try this:

npm i --legacy-peer-deps

instead of:

npm i

[lucaslgr]

Thanks @anseki Now I has installed. Can I import the library as a ES6 Module doing this below!?

import { PlainDraggable } from "plain-draggable";
.
.
.
//Using
draggable = new PlainDraggable (element);

or

import * as PlainDraggable from "plain-draggable";
.
.
.
//Using
draggable = new PlainDraggable (element);

[anseki]

Whether you can use ES Modules or not is dependent on your environment regardless of the library. For example, Webpack is one of libraries that allow it. See: https://webpack.js.org/guides/ecma-script-modules/

[lucaslgr]

Awesome! Thanks @anseki ! It has helped me and is working now! Thanks!

[anseki]

:smile: