Conflicting Peer Dependency Issue "[email protected] and [email protected]"

Question

Hello I am trying to install splide.js with npm install @splidejs/splide but I get this error: npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/browser-sync npm ERR! dev browser-sync@"^3.0.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer browser-sync@"^2" from [email protected] npm ERR! node_modules/browser-sync-webpack-plugin npm ERR! dev browser-sync-webpack-plugin@"^2.3.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: [email protected] npm ERR! node_modules/browser-sync npm ERR! peer browser-sync@"^2" from [email protected] npm ERR! node_modules/browser-sync-webpack-plugin npm ERR! dev browser-sync-webpack-plugin@"^2.3.0" 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!

I have tried to change the versions of browser-sync and browser-sync-webpack-plugin to be from the same time so they would be compatible. But when I do this I get this:

added 8 packages, changed 3 packages, and audited 859 packages in 5s

86 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues (including breaking changes), run:

Run `npm audit` for details.

Then when I input npm audit fix --force. I get this message:

npm WARN using --force Recommended protections disabled.
npm WARN audit Updating browser-sync to 3.0.2, which is a SemVer major change.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: sundancecollege.com@undefined
npm WARN Found: [email protected]
npm WARN node_modules/browser-sync
npm WARN   peer browser-sync@"^2" from [email protected]
npm WARN   node_modules/browser-sync-webpack-plugin
npm WARN     dev browser-sync-webpack-plugin@"^2.3.0" from the root project
npm WARN   1 more (the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer browser-sync@"^2" from [email protected]
npm WARN node_modules/browser-sync-webpack-plugin
npm WARN   dev browser-sync-webpack-plugin@"^2.3.0" from the root project

removed 8 packages, changed 3 packages, and audited 851 packages in 4s

86 packages are looking for funding
  run `npm fund` for details

Which then changes the version back to the original one for browser-sync or browser-sync-webpack-plugin. I also tried changing the version of splide.js but I get the same error. So I seem to be stuck in a loop.

I have tried the ones listed here npm install error while use webpack, Could not resolve dependency but none have worked for me.

And this is the package.json file info

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^1.6.7",
        "browser-sync": "^3.0.2",
        "browser-sync-webpack-plugin": "^2.3.0",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.49",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.14"
    },
    "dependencies": {
        "@github/include-fragment-element": "^5.3.2",
        "@splidejs/splide": "^4.1.4",
        "swiper": "^11.0.5"
    }
}

I have tried the ones listed here npm install error while use webpack, Could not resolve dependency but none have worked for me.

I am wanting to run splide.js in my Laravel website. I would appreciate any suggestions, thank you!

Answer 1

I think the error come from Browser-Sync-Webpack-plugin, haven't update since 3 year's ago and it's too old

See on : https://github.com/Va1/browser-sync-webpack-plugin/issues/97

Solution:

Remove browser-sync-webpack-plugin from package.json then install splidejs or replace browser-sync version from 3 to 2