Material UI Picker - date-fns issue

Question

I am using material UI in my react application and I am having difficulty getting the material-ui-pickers example to work. Here is the online example from Material UI. https://codesandbox.io/s/52p74362pl

The error that i am getting is:

 index.js:1446 ../node_modules/@date-io/date-fns/build/index.esm.js Module not found: `Can't resolve 'date-fns/addDays' in 'C:\Project4\CDE\IFS.CDE.Web\node_modules\@date-io\date-fns\build'`

here are my package.json files

{
  "name": "IFS.CDE.Web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.7.1",
    "@material-ui/icons": "^3.0.1",
    "ajv": "^6.5.2",
    "autosuggest-highlight": "^3.1.1",
    "axios": "^0.18.0",
    "classnames": "^2.2.5",
    "connected-react-router": "6.1.0",
    "date-fns": "^1.30.1",
    "downshift": "^2.0.10",
    "extract-svg-path": "^2.1.0",
    "file-saver": "^1.3.8",
    "install": "^0.12.1",
    "lodash": "^4.17.10",
    "material-ui-datetimepicker": "^1.0.7",
    "material-ui-image": "^3.0.3",
    "material-ui-pickers": "^2.1.1",
    "moment": "^2.23.0",
    "npm": "^6.5.0",
    "parse-svg-path": "^0.1.2",
    "prop-types": "^15.6.2",
    "rc-progress": "^2.2.6",
    "react": "^16.6.3",
    "react-autosuggest": "^9.3.4",
    "react-bingmaps": "^3.6.1",
    "react-color": "^2.14.1",
    "react-dnd": "^7.0.2",
    "react-dom": "^16.6.3",
    "react-dropzone": "^4.3.0",
    "react-file-viewer": "^0.5.0",
    "react-iframe": "^1.2.0",
    "react-loadable": "^5.5.0",
    "react-popper": "^0.10.1",
    "react-redux": "^6.0.0",
    "react-render-html": "^0.6.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.1.2",
    "react-select": "^2.0.0",
    "redux": "^4.0.1",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.3.0",
    "rimraf": "^2.6.2",
    "typeface-roboto": "^0.0.54",
    "uuid": "^3.3.2",
    "video-react": "^0.13.1"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "set-env": "set NODE_ENV=production"
  },
  "devDependencies": {},
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

I have installed date-fns but i still get the error. https://www.npmjs.com/package/date-fns. I also deleted all the node module and did a npm install to see if that would solve the issue but it did not.

Thanks for the help.

Solution 1

Try using date-fns 2.0.0. I had the same issue and fixed by updating the lib. Hope it works.

Solution 2

install this(see here):

npm i --save date-fns@next @date-io/date-fns