0

I've been using package react-date-range for some time now. After installing some other package, my app suddenly crashes with the following error message as I do npm start

Error message from npm

I have NO idea where this is coming from. Tried re-installing the packages after removing them, but it still complains about the missing module.

Here is my package.json file. (Don't mind the mixture of material-ui and bootstrap for the front-end)

Many thanks!

{
  "name": "redux-easy-boilerplate",
  "version": "1.3.3",
  "description": "",
  "scripts": {
    "clean": "rimraf dist",
    "build": "webpack --config webpack/prod.config.js --progress --display-error-details",
    "build:production": "npm run clean && npm run build",
    "lint": "eslint src",
    "start": "webpack-dev-server --hot --config webpack/dev.config.js --color --progress",
    "test": "jest",
    "test:coverage": "jest --coverage",
    "test:watch": "jest --watch"
  },
  "jest": {
    "setupFiles": [
      "./jestsetup.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "moduleNameMapper": {
      "^.+\\.(css|scss)$": "identity-obj-proxy"
    },
    "modulePathIgnorePatterns": [
      "jestsetup.js"
    ],
    "collectCoverageFrom": [
      "**/src/actions/**.{js,jsx}",
      "**/src/reducers/**.{js,jsx}",
      "**/src/constants/**.{js,jsx}",
      "!**/src/actions/account.js",
      "!**/src/actions/user.js",
      "!**/src/reducers/account.js",
      "!**/src/reducers/user.js",
      "!**/src/reducers/index.js",
      "!**/http_functions.js",
      "!**/misc.js"
    ]
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "redux",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack"
  ],
  "author": "https://github.com/anorudes, https://github.com/keske",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "autoprefixer": "6.5.3",
    "axios": "^0.15.3",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "bootstrap": "^3.3.5",
    "bootstrap-less": "^3.3.8",
    "bootstrap-loader": "^3.0.2",
    "bootstrap-sass": "^3.4.0",
    "bootstrap-webpack": "0.0.6",
    "classnames": "^2.2.3",
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^0.26.4",
    "csswring": "^5.1.0",
    "deep-equal": "^1.0.1",
    "deep-freeze": "0.0.1",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.7.1",
    "enzyme-to-json": "^3.2.1",
    "eslint": "^3.4.0",
    "eslint-config-airbnb": "13.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^3.0.1",
    "eslint-plugin-react": "^6.1.2",
    "expect": "^1.13.4",
    "exports-loader": "^0.7.0",
    "expose-loader": "^0.7.5",
    "express": "^4.16.4",
    "express-open-in-editor": "^1.1.0",
    "file-loader": "^3.0.1",
    "gapi": "0.0.3",
    "history": "^4.4.1",
    "html-webpack-plugin": "^3.2.0",
    "http-proxy": "^1.12.0",
    "identity-obj-proxy": "^3.0.0",
    "imports-loader": "^0.6.5",
    "jquery": "^3.1.0",
    "jwt-decode": "^2.1.0",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-mocha": "^1.1.1",
    "karma-webpack": "^1.7.0",
    "less": "^2.5.3",
    "less-loader": "^4.1.0",
    "lodash": "^4.17.11",
    "mini-css-extract-plugin": "^0.5.0",
    "morgan": "^1.9.1",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "q": "^1.4.1",
    "qs": "^6.1.0",
    "rc-datepicker": "^4.0.1",
    "react-addons-css-transition-group": "^15.6.2",
    "react-addons-test-utils": "^15.6.2",
    "react-calendar-component": "^1.0.0",
    "react-date-picker": "^5.3.28",
    "react-datepicker": "^0.37.0",
    "react-document-meta": "^2.0.0-rc2",
    "react-forms": "^2.0.0-beta33",
    "react-hot-loader": "^1.3.0",
    "react-loading-order-with-animation": "^1.0.0",
    "react-onclickoutside": "^5.3.3",
    "react-redux": "^6.0.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^4.0.8",
    "react-test-renderer": "^15.6.2",
    "react-transform-hmr": "^1.0.1",
    "redux": "^3.2.1",
    "redux-form": "^6.0.1",
    "redux-logger": "2.7.4",
    "redux-mock-store": "^1.3.0",
    "redux-thunk": "^2.1.0",
    "resolve-url-loader": "^1.4.3",
    "rimraf": "^2.5.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.7",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-middleware": "^3.5.2",
    "webpack-dev-server": "^3.1.14",
    "webpack-hot-middleware": "^2.24.3",
    "webpack-merge": "^4.2.1",
    "yargs": "^6.5.0"
  },
  "dependencies": {
    "@material-ui/core": "^3.9.0",
    "@material-ui/icons": "^3.0.2",
    "@material-ui/styles": "^3.0.0-alpha.8",
    "bootstrap-daterangepicker": "^3.0.3",
    "bootstrap-sass-loader": "^1.0.10",
    "clsx": "^1.0.4",
    "codemirror": "^5.33.0",
    "date-fns": "^1.30.1",
    "emoji-dictionary": "^1.0.10",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "gulp-sass": "^4.0.2",
    "markdown-to-jsx": "^6.9.0",
    "marked": "^0.3.12",
    "moment": "^2.22.2",
    "notistack": "^0.8.6",
    "react": "^16.7.0",
    "react-bootstrap": "^0.32.3",
    "react-bootstrap-datetimerangepicker": "^2.0.4",
    "react-checkbox-tree": "^1.5.1",
    "react-date-range": "^1.0.0-beta",
    "react-dom": "^16.7.0",
    "react-drag-and-drop": "^2.4.0",
    "react-markdown": "^4.2.2",
    "react-notifications": "^1.4.3",
    "react-swipeable-views": "^0.12.13",
    "react-time-picker": "^3.5.2",
    "react-timezone": "^2.3.0",
    "recharts": "^1.4.2",
    "prop-types": "latest",
    "uuid": "latest"
  }
}

8
  • Did you try deleting node_modules and package.lock and then install node_modules again Mar 24, 2020 at 8:47
  • Yeah @MuhammadHaseeb, I deleted both and proceeded with a clean npm install but still not working.
    – ivenpoker
    Mar 24, 2020 at 8:56
  • Its hard to get an idea from that that snap, did you open the file and check the module path that error is referring to? Mar 24, 2020 at 8:59
  • I succeeded in fixing the issue (even though I don't know why this is happening) by install the date-fns@next via npm install date-fns@next
    – ivenpoker
    Mar 24, 2020 at 8:59
  • @MuhammadHaseeb I opened the file and check the module, but was 'adviced' by my IDE (PyCharm) not to edit the file.
    – ivenpoker
    Mar 24, 2020 at 9:00

1 Answer 1

4

I found a solution. Just did npm install date-fns@next and everything was okay. Had to change some lines of code in app to match date-fns documentation though.

Your Answer

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.