1

I had started working w/React a month ago. Downloaded a bunch of libraries some of which were useful. But when I tried to get date-io/date-fns to work I got stuck. I was getting strange errors of not being able to find 'Button in @material-ui', so I went to look in my folder structure and found THREE COPIES of package.json in my project!! I had been installing packages into the default folder when you open a command window in vscode. Don't know who they ended up all over the place.

Anway, I decided to start a new project from scratch in vscode and copy all my source folders over, then reinstall all the packages I was using. Here's what I did:

  • created a new vscode .net core project/react js (no redux)

  • copied my source folder from my old project folder to the new one. replacing all files/folders in the new project.

  • opened up a powershell cmd window. Entered the following commands:

    yarn upgrade react
    yarn add react-router
    yarn add-react-router-dom
    yarn add formik
    yarn add yup
    yarn add @material-io/core
    yarn add @material-io/icons
    yarn add @material-io/pickers
    yarn add @date-io
    yarn add @date-io/date-fns
    yarn add yup
    

Okay, so then I compiled the app and ran it. I STILL get a date-fn error, but a different one now:

Module not found: Can't resolve 'date-fns/_lib/format/longFormatters' in 'C:\projects\DoxaProject\DoxaUI\DoxaUI\node_modules@date-io\date-fns\build'

My package.json file has the latest dependencies, INCLUDING date-io/date-fns.

Why am I getting this error? I've now spend a day trying to just get ONE date field working. If anyone can help I'd truly appreciate it!

2 Answers 2

2

the material-ui/pickers document:

Important: For material-ui-pickers v3 use v1.x version of @date-io adapters.

yarn add @date-io/[email protected]

=========================== you should user 1.x

0

What worked for me was to explicitly add date-fns to my project.

yarn add date-fns

Hope that solves your frustrating problem.

3
  • Ok. So I did what you said. I did yarn add date-fns and reran the app. Now I receive a different error: "RangeError: Format string contains an unescaped latin alphabet character n (anonymous function) C:/projects/DoxaProject/DoxaUI/DoxaUI/node_modules/date-fns/esm/format/index.js:421" Why is this so difficult? I haven't had this issue w/any other library, but date-fns is a disaster so far. Any ideas?
    – Andrew H
    Jun 21, 2020 at 18:47
  • 1
    I found the problem. It turns out that using the above while the right idea doesn't work, because there's a bug in date-fns 2.x when mixed w/material-ui pickers that I had above. The solution is to remove the latest version of date-fns and replace it with a 1.x version: npm i @date-io/date[email protected] date-fns This fixed that issue. Thanks for the help!
    – Andrew H
    Jun 21, 2020 at 19:16
  • true! I found myself fighting with the same issue... quite frustrating Jun 24, 2020 at 11:13

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.