2

Im upgrading my system from React 15.4 to React 17.0.2

Im having an issue with React-Widgets

Warning: Failed prop type: [React Widgets] You are attempting to use a widget that requires localization (Calendar, DateTimePicker, NumberPicker). However there is no localizer set. Please configure a localizer.

So im not sure how to handle this.

I installed the following for this.

"moment": "^2.29.1",
"react-widgets": "^4.6.1",
"react-widgets-moment": "^5.0.11",
"react-widgets-moment-localizer": "^1.0.2",

When I start the program I am met with the error above. This is the attempt to set the localizer.

import MomentLocalizer from "react-widgets-moment-localizer";
import dateHandler, {parseDate} from './dateHandler'
import {DateTimePicker, SelectList, DropdownList} from 'react-widgets';

// moment.locale('en');
// MomentLocalizer(moment);

moment.locale('en')
const localizer = new MomentLocalizer(moment)

But results in the error mentioned. I also looked at the documentation (http://jquense.github.io/react-widgets/docs/localization) But obviously failed to get it going.

Any help would be appreciated.

morne
  • 4,035
  • 9
  • 50
  • 96
  • You need to add a `` around the entirety of your app (the thing which gets rendered into `#root`). However, I'm trying to use this right now and having similar trouble regarding the Localizer's type definitions being 6 years behind the npm package for some reason, which doesnt let me use `new` as instructed by React Widgets. – oooyaya Dec 14 '21 at 23:24
  • @oooyaya try my suggestion and see if it might work for you. – morne Dec 15 '21 at 10:15

1 Answers1

0

For me what worked was to copy the old localizers folder into the React-widgets tree.

../react-widgets/lib/localizers

Then invoking it in the same way as I used to.

import moment from 'moment';
import momentLocalizer from 'react-widgets/lib/localizers/moment';
import {DateTimePicker, SelectList, DropdownList} from 'react-widgets';

// moment.locale('en');
// momentLocalizer(moment);

moment.updateLocale("en", { week: {
        dow: 1, // First day of week is Monday
        doy: 4  // First week of year must contain 4 January (7 + 1 - 4)
    }}); //this is to change the first day of the week from sunday to monday
momentLocalizer(moment);
morne
  • 4,035
  • 9
  • 50
  • 96
  • Heads up that this will break the next time you do any sort of `npm prune/install` business. `node_modules` shouldn't be manually fiddled with. But, what you did is probably what the author of the repo needs to do in some way, so that someone like you doesn't need to manually fix the repo after installing it. What you have might work but it's going to need to be re-done with some frequency e.g. when you execute a build/deploy which will start from scratch and need to do an `npm install`. – oooyaya Dec 15 '21 at 19:46