React Bootstrap datepicker issue with package.json

user_1389637 0
Viewed 919

I am having a major issue with my npm package installer. It was working always but I removed the package-lock.json file, and just doesnt work at all now. I cant seem to run it, all I can offer currently is my pakage.json file as shown below and my npm log, which gives the following error:

Npm log enter image description here

My package.json

{
    "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": {
        "@babel/preset-react": "^7.12.1",
        "axios": "^0.19",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "bootstrap": "^4.0.0",
        "browser-sync": "^2.26.13",
        "browser-sync-webpack-plugin": "^2.2.2",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "react": "^16.2.0",
        "react-dom": "^16.14.0",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0"
    },
    "dependencies": {
        "@crystallize/react-growl": "^3.2.0",
        "@material-ui/core": "^4.11.3",
        "@material-ui/icons": "^4.11.2",
        "final-form": "^4.20.1",
        "final-form-arrays": "^3.0.2",
        "framer-motion": "^2.9.4",
        "google-map-react": "^2.1.8",
        "google-maps-react": "^2.0.6",
        "google-timezone-api": "^1.0.1",
        "i": "^0.3.6",
        "leaflet": "^1.7.1",
        "moment": "^2.29.1",
        "moment-timezone": "^0.5.32",
        "npm": "^6.14.8",
        "query-string": "^6.14.1",
        "react-bootstrap": "^1.5.2",
        "react-bootstrap-date-picker": "^5.1.0",
        "react-bootstrap-typeahead": "^5.1.4",
        "react-content-loader": "^5.1.4",
        "react-create-class": "^1.0.0",
        "react-data-table": "^0.1.0",
        "react-data-table-component": "^6.11.5",
        "react-datepicker": "^3.3.0",
        "react-dates": "^21.8.0",
        "react-device-detect": "^1.14.0",
        "react-dropzone": "^11.2.3",
        "react-feather": "^2.0.8",
        "react-final-form": "^6.5.1",
        "react-final-form-file-field": "0.0.6",
        "react-google-places-autocomplete": "^3.0.0",
        "react-growl": "^0.1.2",
        "react-helmet": "^6.1.0",
        "react-image-crop": "^8.6.6",
        "react-lazyload": "^2.6.5",
        "react-leaflet": "^2.7.0",
        "react-notifications": "^1.7.2",
        "react-parallax": "^3.1.2",
        "react-phone-number-input": "^3.1.16",
        "react-places-autocomplete": "^7.3.0",
        "react-redux": "^7.2.1",
        "react-router-dom": "^5.2.0",
        "react-router-redux": "^4.0.8",
        "react-select": "^3.1.0",
        "react-slick": "^0.27.12",
        "react-table": "^6.11.5",
        "react-table-v6": "^6.8.6",
        "react-toast-notifications": "^2.4.0",
        "redux": "^4.0.5",
        "redux-thunk": "^2.3.0",
        "slick-carousel": "^1.8.1",
        "styled-components": "^5.2.0"
    },
    "babel": {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ],
        "plugins": [
            "@babel/plugin-proposal-class-properties"
        ]
    }
}
npm reactjs
3 Answers
user_28672880

There's a version conflict between the version of react-bootstrap that you've specified in your package.json, and the version of react-bootstrap that react-bootstrap-date-picker specifies it needs.

Your package.json lists

"react-bootstrap": "^1.5.2"

In the latest react-bootstrap-date-picker, it lists

"react-bootstrap": "^0.31.0"

The carrot notation (^) allows npm to install the latest minor version (the second number in the three-part version string), but never change the major version number (first number in the version string). That means the ^0.31.0 version cannot be automatically increased to 1.0.0 (the next major version) or anything greater.

I'd suggest changing your package.json to specify: "react-bootstrap": "^0.32.0". However, you should be aware that will install a fairly old version of react-bootstrap.

Alternatively, you may also want to look around for a newer date-picker package, as it doesn't look like react-bootstrap-date-picker has been updated in the last four years. It's relying on a older version of react-bootstrap (from ~4yrs ago). It's also probably very out of date compared to the latest versions of Bootstrap 4 and 5.

user_12748590

Looks like i answered my own question with the following:

npm install --legacy-peer-deps

If anyone can shed a light on this on if this is safe to use on production and in the future as well. Thank you.

user_13896370
Related