Volto: Date Field `month` must be a valid moment object

Here is interesting problem with using default 'date' content type field if your locale timezone is set to Asia/Jakarta.

TestCase:

  1. Create a new content type 'Moment-Test'
  2. Switch to Fields Tab and add 'Date' field.
  3. Save content Type.
  4. In Volto front, try to add content type 'Moment-Test'. Adding or Editing Date field would result in TypeError from Calendar component.
Uncaught TypeError: `month` must be a valid moment object
    getCalendarMonthWeeks getCalendarMonthWeeks.js:18
    CalendarMonth CalendarMonth.js:135
    React 12
    unstable_runWithPriority scheduler.development.js:468
    React 6
getCalendarMonthWeeks.js:18
    getCalendarMonthWeeks getCalendarMonthWeeks.js:18
    CalendarMonth CalendarMonth.js:135
    React 11
    performSyncWorkOnRoot self-hosted:1225
    flushSyncCallbackQueueImpl React
    unstable_runWithPriority scheduler.development.js:468
    React 6
    bind_applyFunctionN self-hosted:1376
    dispatchDiscreteEvent self-hosted:1339

Could you show what the serialized content (before edit action) looks like?

SingleDatePicker component on form loaded


[HMR] Waiting for update signal from WDS... log.js:24
[Click to expand] <SingleDatePicker /> react_devtools_backend.js:8402:15
[Click to expand] <SingleDatePicker /> react_devtools_backend.js:8402:15
Props: 
Object { date: null, disabled: false, onDateChange: DatetimeWidgetComponent(date), focused: false, numberOfMonths: 1, isOutsideRange: isOutsideRange(), onFocusChange: DatetimeWidgetComponent(), noBorder: true, displayFormat: "MM/DD/YYYY", navPrev: {…}, … }
​
anchorDirection: "left"
​
appendToBody: false
​
ariaLabel: undefined
​
block: false
​
calendarInfoPosition: "bottom"
​
css: function css()
​
customCloseIcon: null
​
customInputIcon: null
​
date: null
​
dayAriaLabelFormat: undefined
​
dayPickerNavigationInlineStyles: null
​
daySize: 39
​
disableScroll: false
​
disabled: false
​
displayFormat: "MM/DD/YYYY"
​
enableOutsideDays: false
​
firstDayOfWeek: null
​
focused: false
​
hideKeyboardShortcutsPanel: false
​
horizontalMargin: 0
​
horizontalMonthPadding: 13
​
id: "date-date"
​
initialVisibleMonth: null
​
inputIconPosition: "before"
​
isDayBlocked: function isDayBlocked()
​
isDayHighlighted: function isDayHighlighted()
​
isOutsideRange: function isOutsideRange()
​
isRTL: false
​
keepFocusOnInput: false
​
keepOpenOnDateSelect: false
​
monthFormat: "MMMM YYYY"
​
navNext: Object { "$$typeof": Symbol("react.element"), type: NextIcon(), key: null, … }
​
navPosition: "navPositionTop"
​
navPrev: Object { "$$typeof": Symbol("react.element"), type: PrevIcon(), key: null, … }
​
noBorder: true
​
numberOfMonths: 1
​
onClose: function onClose()
​
onDateChange: function DatetimeWidgetComponent(date)
​
onFocusChange: function DatetimeWidgetComponent()
​
onNextMonthClick: function onNextMonthClick()
​
onPrevMonthClick: function onPrevMonthClick()
​
openDirection: "down"
​
orientation: "horizontal"
​
phrases: Object { calendarLabel: "Calendar", roleDescription: "datepicker", closeDatePicker: "Close", … }
​
placeholder: "Date"
​
readOnly: false
​
regular: false
​
renderCalendarDay: undefined
​
renderCalendarInfo: null
​
renderDayContents: null
​
renderMonthElement: null
​
renderMonthText: null
​
renderNavNextButton: null
​
renderNavPrevButton: null
​
renderWeekHeaderElement: null
​
reopenPickerOnClearDate: false
​
required: false
​
screenReaderInputMessage: ""
​
showClearDate: false
​
showDefaultInputIcon: false
​
small: false
​
styles: Object { SingleDatePicker: "SingleDatePicker", SingleDatePicker__block: "SingleDatePicker__block", SingleDatePicker_picker: "SingleDatePicker_picker", … }
​
theme: Object { reactDates: {…} }
​
transitionDuration: undefined
​
verticalHeight: null
​
verticalSpacing: 22
​
weekDayFormat: "dd"
​
withFullScreenPortal: false
​
withPortal: false
​
<prototype>: Object { … }
react_devtools_backend.js:8407:15
State: 
Object { dayPickerContainerStyles: {}, isDayPickerFocused: false, isInputFocused: false, showKeyboardShortcuts: false }
​
dayPickerContainerStyles: Object {  }
​
isDayPickerFocused: false
​
isInputFocused: false
​
showKeyboardShortcuts: false
​
<prototype>: Object { … }
react_devtools_backend.js:8411:15
Nodes: 
Array [ div.SingleDatePicker.SingleDatePicker_1 ]
​
0: <div class="SingleDatePicker SingleDatePicker_1">
​
length: 1
​
<prototype>: Array []
react_devtools_backend.js:8421:15
Right-click any value to save it as a global variable for further inspection. react_devtools_backend.js:8429:15

Component State after the type error is trigger on date select.

Props:Object { date: {…}, disabled: false, onDateChange: DatetimeWidgetComponent(date), focused: false, numberOfMonths: 1, isOutsideRange: isOutsideRange(), onFocusChange: DatetimeWidgetComponent()

, noBorder: true, displayFormat: "MM/DD/YYYY", navPrev: {…}, … }

​

anchorDirection: "left"

​

appendToBody: false

​

ariaLabel: undefined

​

block: false

​

calendarInfoPosition: "bottom"

​

css: function css()

​

customCloseIcon: null

​

customInputIcon: null

​

date: Object { _isAMomentObject: true, _i: "2022-01-01Z", _isUTC: false, … }

​

dayAriaLabelFormat: undefined

​

dayPickerNavigationInlineStyles: null

​

daySize: 39

​

disableScroll: false

​

disabled: false

​

displayFormat: "MM/DD/YYYY"

​

enableOutsideDays: false

​

firstDayOfWeek: null

​

focused: false

​

hideKeyboardShortcutsPanel: false

​

horizontalMargin: 0

​

horizontalMonthPadding: 13

​

id: "date-date"

​

initialVisibleMonth: null

​

inputIconPosition: "before"

​

isDayBlocked: function isDayBlocked()​isDayHighlighted: function isDayHighlighted()​isOutsideRange: function isOutsideRange()

​

isRTL: false

​

keepFocusOnInput: false

​

keepOpenOnDateSelect: false

​

monthFormat: "MMMM YYYY"

​

navNext: Object { "$$typeof": Symbol("react.element"), type: NextIcon()

, key: null, … }

​

navPosition: "navPositionTop"

​

navPrev: Object { "$$typeof": Symbol("react.element"), type: PrevIcon()

, key: null, … }

​

noBorder: true

​

numberOfMonths: 1

​

onClose: function onClose()​onDateChange: function DatetimeWidgetComponent(date)​onFocusChange: function DatetimeWidgetComponent()​onNextMonthClick: function onNextMonthClick()​onPrevMonthClick: function onPrevMonthClick()

​

openDirection: "down"

​

orientation: "horizontal"

​

phrases: Object { calendarLabel: "Calendar", roleDescription: "datepicker", closeDatePicker: "Close", … }

​

placeholder: "Date"

​

readOnly: false

​

regular: false

​

renderCalendarDay: undefined

​

renderCalendarInfo: null

​

renderDayContents: null

​

renderMonthElement: null

​

renderMonthText: null

​

renderNavNextButton: null

​

renderNavPrevButton: null

​

renderWeekHeaderElement: null

​

reopenPickerOnClearDate: false

​

required: false

​

screenReaderInputMessage: ""

​

showClearDate: false

​

showDefaultInputIcon: false

​

small: false

​

styles: Object { SingleDatePicker: "SingleDatePicker", SingleDatePicker__block: "SingleDatePicker__block", SingleDatePicker_picker: "SingleDatePicker_picker", … }

​

theme: Object { reactDates: {…} }

​

transitionDuration: undefined

​

verticalHeight: null

​

verticalSpacing: 22

​

weekDayFormat: "dd"

​

withFullScreenPortal: false

​

withPortal: false

​

<prototype>: Object { … }

[react_devtools_backend.js:8407:15](moz-extension://2b7bb11f-c16b-47b1-9355-3b62b24c2290/build/react_devtools_backend.js)

State:

Object { dayPickerContainerStyles: {…}, isDayPickerFocused: false, isInputFocused: true, showKeyboardShortcuts: false }

​

dayPickerContainerStyles: Object { left: 0 }

​

isDayPickerFocused: false

​

isInputFocused: true

​

showKeyboardShortcuts: false

​

<prototype>: Object { … }

Full Stack Trace


Γ—
1 of 3 errors on the page
TypeError: `month` must be a valid moment object
getCalendarMonthWeeks
node_modules/react-dates/lib/utils/getCalendarMonthWeeks.js:18

  15 | var firstDayOfWeek = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _moment["default"].localeData().firstDayOfWeek();
  16 | 
  17 | if (!_moment["default"].isMoment(month) || !month.isValid()) {
> 18 |   throw new TypeError('`month` must be a valid moment object');
     | ^  19 | }
  20 | 
  21 | if (_constants.WEEKDAYS.indexOf(firstDayOfWeek) === -1) {

CalendarMonth
node_modules/react-dates/lib/components/CalendarMonth.js:135

  132 | 
  133 | _this = _ref.call(this, props) || this;
  134 | _this.state = {
> 135 |   weeks: (0, _getCalendarMonthWeeks["default"])(props.month, props.enableOutsideDays, props.firstDayOfWeek == null ? _moment["default"].localeData().firstDayOfWeek() : props.firstDayOfWeek)
      | ^  136 | };
  137 | _this.setCaptionRef = _this.setCaptionRef.bind((0, _assertThisInitialized2["default"])(_this));
  138 | _this.setMonthTitleHeight = _this.setMonthTitleHeight.bind((0, _assertThisInitialized2["default"])(_this));

constructClassInstance
node_modules/react-dom/cjs/react-dom.development.js:12716

  12713 |   }
  12714 | }
  12715 | 
> 12716 | var instance = new ctor(props, context);
        | ^  12717 | var state = workInProgress.memoizedState = instance.state !== null && instance.state !== undefined ? instance.state : null;
  12718 | adoptClassInstance(workInProgress, instance);
  12719 | 

updateClassComponent
node_modules/react-dom/cjs/react-dom.development.js:17425

  17422 |   } // In the initial pass we might need to construct the instance.
  17423 | 
  17424 | 
> 17425 |   constructClassInstance(workInProgress, Component, nextProps);
        | ^  17426 |   mountClassInstance(workInProgress, Component, nextProps, renderLanes);
  17427 |   shouldUpdate = true;
  17428 | } else if (current === null) {

beginWork
node_modules/react-dom/cjs/react-dom.development.js:19073

  19070 | 
  19071 |     var _resolvedProps = workInProgress.elementType === _Component2 ? _unresolvedProps : resolveDefaultProps(_Component2, _unresolvedProps);
  19072 | 
> 19073 |     return updateClassComponent(current, workInProgress, _Component2, _resolvedProps, renderLanes);
        | ^  19074 |   }
  19075 | 
  19076 | case HostRoot:

callCallback
node_modules/react-dom/cjs/react-dom.development.js:3945

  3942 | function callCallback() {
  3943 |   didCall = true;
  3944 |   restoreAfterDispatch();
> 3945 |   func.apply(context, funcArgs);
       | ^  3946 |   didError = false;
  3947 | } // Create a global error event handler. We use this to capture the value
  3948 | // that was thrown. It's possible that this error handler will fire more

invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:3994

  3991 | // errors, it will trigger our global error handler.
  3992 | 
  3993 | evt.initEvent(evtType, false, false);
> 3994 | fakeNode.dispatchEvent(evt);
       | ^  3995 | 
  3996 | if (windowEventDescriptor) {
  3997 |   Object.defineProperty(window, 'event', windowEventDescriptor);

invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:4056

  4053 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
  4054 |   hasError = false;
  4055 |   caughtError = null;
> 4056 |   invokeGuardedCallbackImpl$1.apply(reporter, arguments);
  4057 | }
  4058 | /**
  4059 |  * Same as invokeGuardedCallback, but instead of returning an error, it stores

beginWork$1
node_modules/react-dom/cjs/react-dom.development.js:23964

  23961 | } // Run beginWork again.
  23962 | 
  23963 | 
> 23964 | invokeGuardedCallback(null, beginWork, null, current, unitOfWork, lanes);
        | ^  23965 | 
  23966 | if (hasCaughtError()) {
  23967 |   var replayError = clearCaughtError(); // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.

performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:22776

  22773 | 
  22774 | if ( (unitOfWork.mode & ProfileMode) !== NoMode) {
  22775 |   startProfilerTimer(unitOfWork);
> 22776 |   next = beginWork$1(current, unitOfWork, subtreeRenderLanes);
        | ^  22777 |   stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
  22778 | } else {
  22779 |   next = beginWork$1(current, unitOfWork, subtreeRenderLanes);

workLoopSync
node_modules/react-dom/cjs/react-dom.development.js:22707

  22704 | function workLoopSync() {
  22705 |   // Already timed out, so perform work without checking if we need to yield.
  22706 |   while (workInProgress !== null) {
> 22707 |     performUnitOfWork(workInProgress);
  22708 |   }
  22709 | }
  22710 | 

renderRootSync
node_modules/react-dom/cjs/react-dom.development.js:22670

  22667 | 
  22668 | do {
  22669 |   try {
> 22670 |     workLoopSync();
        | ^  22671 |     break;
  22672 |   } catch (thrownValue) {
  22673 |     handleError(root, thrownValue);

performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:22293

  22290 |   }
  22291 | } else {
  22292 |   lanes = getNextLanes(root, NoLanes);
> 22293 |   exitStatus = renderRootSync(root, lanes);
        | ^  22294 | }
  22295 | 
  22296 | if (root.tag !== LegacyRoot && exitStatus === RootErrored) {

flushSyncCallbackQueueImpl/<
node_modules/react-dom/cjs/react-dom.development.js:11327

  11324 |     var callback = _queue[i];
  11325 | 
  11326 |     do {
> 11327 |       callback = callback(_isSync2);
        | ^  11328 |     } while (callback !== null);
  11329 |   }
  11330 | });

unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js:468

  465 | currentPriorityLevel = priorityLevel;
  466 | 
  467 | try {
> 468 |   return eventHandler();
      | ^  469 | } finally {
  470 |   currentPriorityLevel = previousPriorityLevel;
  471 | }

runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js:11276

  11273 | 
  11274 | function runWithPriority$1(reactPriorityLevel, fn) {
  11275 |   var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
> 11276 |   return Scheduler_runWithPriority(priorityLevel, fn);
  11277 | }
  11278 | function scheduleCallback(reactPriorityLevel, callback, options) {
  11279 |   var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

flushSyncCallbackQueueImpl
node_modules/react-dom/cjs/react-dom.development.js:11322

  11319 | try {
  11320 |   var _isSync2 = true;
  11321 |   var _queue = syncQueue;
> 11322 |   runWithPriority$1(ImmediatePriority$1, function () {
        | ^  11323 |     for (; i < _queue.length; i++) {
  11324 |       var callback = _queue[i];
  11325 | 

flushSyncCallbackQueue
node_modules/react-dom/cjs/react-dom.development.js:11309

  11306 |     Scheduler_cancelCallback(node);
  11307 |   }
  11308 | 
> 11309 |   flushSyncCallbackQueueImpl();
  11310 | }
  11311 | 
  11312 | function flushSyncCallbackQueueImpl() {

discreteUpdates$1
node_modules/react-dom/cjs/react-dom.development.js:22420

  22417 |     if (executionContext === NoContext) {
  22418 |       // Flush the immediate callbacks that were scheduled during this batch
  22419 |       resetRenderTimer();
> 22420 |       flushSyncCallbackQueue();
        | ^  22421 |     }
  22422 |   }
  22423 | }

discreteUpdates
node_modules/react-dom/cjs/react-dom.development.js:3756

  3753 | isInsideEventHandler = true;
  3754 | 
  3755 | try {
> 3756 |   return discreteUpdatesImpl(fn, a, b, c, d);
       | ^  3757 | } finally {
  3758 |   isInsideEventHandler = prevIsInsideEventHandler;
  3759 | 

dispatchDiscreteEvent
node_modules/react-dom/cjs/react-dom.development.js:5889

  5886 |     flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);
  5887 |   }
  5888 | 
> 5889 |   discreteUpdates(dispatchEvent, domEventName, eventSystemFlags, container, nativeEvent);
  5890 | }
  5891 | 
  5892 | function dispatchUserBlockingUpdate(domEventName, eventSystemFlags, container, nativeEvent) {

EventListener.handleEvent*addEventBubbleListener
node_modules/react-dom/cjs/react-dom.development.js:6011

  6008 | }
  6009 | 
  6010 | function addEventBubbleListener(target, eventType, listener) {
> 6011 |   target.addEventListener(eventType, listener, false);
  6012 |   return listener;
  6013 | }
  6014 | function addEventCaptureListener(target, eventType, listener) {

addTrappedEventListener
node_modules/react-dom/cjs/react-dom.development.js:8411

  8408 |     if (isPassiveListener !== undefined) {
  8409 |       unsubscribeListener = addEventBubbleListenerWithPassiveFlag(targetContainer, domEventName, listener, isPassiveListener);
  8410 |     } else {
> 8411 |       unsubscribeListener = addEventBubbleListener(targetContainer, domEventName, listener);
  8412 |     }
  8413 |   }
  8414 | }

listenToNativeEvent
node_modules/react-dom/cjs/react-dom.development.js:8374

  8371 |       eventSystemFlags |= IS_CAPTURE_PHASE;
  8372 |     }
  8373 | 
> 8374 |     addTrappedEventListener(target, domEventName, eventSystemFlags, isCapturePhaseListener);
  8375 |     listenerSet.add(listenerSetKey);
  8376 |   }
  8377 | }

listenToAllSupportedEvents/<
node_modules/react-dom/cjs/react-dom.development.js:8326

  8323 | rootContainerElement[listeningMarker] = true;
  8324 | allNativeEvents.forEach(function (domEventName) {
  8325 |   if (!nonDelegatedEvents.has(domEventName)) {
> 8326 |     listenToNativeEvent(domEventName, false, rootContainerElement, null);
       | ^  8327 |   }
  8328 | 
  8329 |   listenToNativeEvent(domEventName, true, rootContainerElement, null);

listenToAllSupportedEvents
node_modules/react-dom/cjs/react-dom.development.js:8324

  8321 | }
  8322 | 
  8323 | rootContainerElement[listeningMarker] = true;
> 8324 | allNativeEvents.forEach(function (domEventName) {
       | ^  8325 |   if (!nonDelegatedEvents.has(domEventName)) {
  8326 |     listenToNativeEvent(domEventName, false, rootContainerElement, null);
  8327 |   }

createRootImpl
node_modules/react-dom/cjs/react-dom.development.js:25887

  25884 | 
  25885 | {
  25886 |   var rootContainerElement = container.nodeType === COMMENT_NODE ? container.parentNode : container;
> 25887 |   listenToAllSupportedEvents(rootContainerElement);
        | ^  25888 | }
  25889 | 
  25890 | if (mutableSources) {

ReactDOMBlockingRoot
node_modules/react-dom/cjs/react-dom.development.js:25835

  25832 | }
  25833 | 
  25834 | function ReactDOMBlockingRoot(container, tag, options) {
> 25835 |   this._internalRoot = createRootImpl(container, tag, options);
  25836 | }
  25837 | 
  25838 | ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function (children) {

createLegacyRoot
node_modules/react-dom/cjs/react-dom.development.js:25900

  25897 |   return root;
  25898 | }
  25899 | function createLegacyRoot(container, options) {
> 25900 |   return new ReactDOMBlockingRoot(container, LegacyRoot, options);
  25901 | }
  25902 | function isValidContainer(node) {
  25903 |   return !!(node && (node.nodeType === ELEMENT_NODE || node.nodeType === DOCUMENT_NODE || node.nodeType === DOCUMENT_FRAGMENT_NODE || node.nodeType === COMMENT_NODE && node.nodeValue === ' react-mount-point-unstable '));

legacyCreateRootFromDOMContainer
node_modules/react-dom/cjs/react-dom.development.js:25981

  25978 |     }
  25979 |   }
  25980 | 
> 25981 |   return createLegacyRoot(container, shouldHydrate ? {
  25982 |     hydrate: true
  25983 |   } : undefined);
  25984 | }

legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:26007

  26004 | 
  26005 | if (!root) {
  26006 |   // Initial mount
> 26007 |   root = container._reactRootContainer = legacyCreateRootFromDOMContainer(container, forceHydrate);
        | ^  26008 |   fiberRoot = root._internalRoot;
  26009 | 
  26010 |   if (typeof callback === 'function') {

hydrate
node_modules/react-dom/cjs/react-dom.development.js:26086

  26083 |   } // TODO: throw or warn if we couldn't hydrate?
  26084 | 
  26085 | 
> 26086 |   return legacyRenderSubtreeIntoContainer(null, element, container, true, callback);
  26087 | }
  26088 | function render(element, container, callback) {
  26089 |   if (!isValidContainer(container)) {

./node_modules/@plone/volto/src/start-client.jsx/__webpack_exports__.default/<
node_modules/@plone/volto/src/start-client.jsx:57

  54 | }
  55 | 
  56 | loadableReady(() => {
> 57 |   hydrate(
     | ^  58 |     <Provider store={store}>
  59 |       <IntlProvider onError={reactIntlErrorHandler}>
  60 |         <ConnectedRouter history={history}>

promise callback*loadableReady
node_modules/@loadable/component/dist/loadable.esm.js:542

  539 |     };
  540 | 
  541 |     checkReadyState();
> 542 |   }).then(done);
  543 | }
  544 | 
  545 | /* eslint-disable no-underscore-dangle */

./node_modules/@plone/volto/src/start-client.jsx/__webpack_exports__.default
node_modules/@plone/volto/src/start-client.jsx:56

  53 |   config.settings.legacyTraverse = true;
  54 | }
  55 | 
> 56 | loadableReady(() => {
     | ^  57 |   hydrate(
  58 |     <Provider store={store}>
  59 |       <IntlProvider onError={reactIntlErrorHandler}>

./src/client.js/<
src/client.js:8

   5 | 
   6 | import client from '@plone/volto/start-client';
   7 | 
>  8 | client();
   9 | 
  10 | if (module.hot) {
  11 |   module.hot.accept();

./src/client.js
http://localhost:3001/static/js/client.chunk.js:286:30
__webpack_require__
/home/arky/Code/Plone/Plone-6/frontend/webpack/bootstrap:873

  870 | 
  871 | try {
  872 | 
> 873 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  874 | 
  875 | } finally {
  876 |   cleanup();

fn
/home/arky/Code/Plone/Plone-6/frontend/webpack/bootstrap:150

  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {

1
http://localhost:3001/static/js/client.chunk.js:4660:18
__webpack_require__
/home/arky/Code/Plone/Plone-6/frontend/webpack/bootstrap:873

  870 | 
  871 | try {
  872 | 
> 873 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  874 | 
  875 | } finally {
  876 |   cleanup();

checkDeferredModules
/home/arky/Code/Plone/Plone-6/frontend/webpack/bootstrap:45

  42 | 	}
  43 | 	if(fulfilled) {
  44 | 		deferredModules.splice(i--, 1);
> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 | 	}
  47 | }
  48 | 

webpackJsonpCallback
/home/arky/Code/Plone/Plone-6/frontend/webpack/bootstrap:32

  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 | 	// run deferred modules when all chunks ready
> 32 | 	return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 | 	var result;

(anonymous function)
http://localhost:3001/static/js/vendors~client.chunk.js:1:85
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.


daySize: 39

Something weird. But I would still need to see the "raw backend value". You can get that with curl -H "Accept: application/json" http://localhost:8080/Plone/path/to/content/item

Here you go



{
  "@components": {
    "actions": {
      "@id": "http://localhost:3000/test/test/@actions"
    }, 
    "breadcrumbs": {
      "@id": "http://localhost:3000/test/test/@breadcrumbs"
    }, 
    "contextnavigation": {
      "@id": "http://localhost:3000/test/test/@contextnavigation"
    }, 
    "navigation": {
      "@id": "http://localhost:3000/test/test/@navigation"
    }, 
    "types": {
      "@id": "http://localhost:3000/test/test/@types"
    }, 
    "workflow": {
      "@id": "http://localhost:3000/test/test/@workflow"
    }
  }, 
  "@id": "http://localhost:3000/test/test", 
  "@type": "moment_test", 
  "UID": "f6c5b4df5e274d15a4516f2f7407bb9d", 
  "allow_discussion": false, 
  "contributors": [], 
  "created": "2022-01-21T17:38:56+00:00", 
  "creators": [
    "admin"
  ], 
  "date": "2022-01-01", 
  "description": "test", 
  "effective": "2022-01-22T00:42:52", 
  "expires": null, 
  "id": "test", 
  "is_folderish": true, 
  "items": [], 
  "items_total": 0, 
  "language": {
    "title": "English (USA)", 
    "token": "en-us"
  }, 
  "layout": "view", 
  "lock": {}, 
  "modified": "2022-01-21T17:42:52+00:00", 
  "next_item": {}, 
  "parent": {
    "@id": "http://localhost:3000/test", 
    "@type": "Document", 
    "description": "testpage", 
    "image_field": null, 
    "review_state": "published", 
    "title": "Test"
  }, 
  "previous_item": {
    "@id": "http://localhost:3000/test/index", 
    "@type": "Document", 
    "description": "", 
    "title": "Index"
  }, 
  "review_state": "published", 
  "rights": "", 
  "subjects": [], 
  "title": "Test", 
  "version": "current", 
  "working_copy": null, 
  "working_copy_of": null
}

I can't really see something wrong. What about that prop, "date", which is collapsed? Props:Object { date: {…}

I've tried on my computer, I couldn't replicate based on your steps, but I don't have your locale. Can you determine if it's strictly related to the locale?

Here is the output from data

{
  "date": {
    "_isAMomentObject": true,
    "_i": "1971-06-24Z",
    "_isUTC": false,
    "_pf": "{charsLeftOver: 0, empty: false, invalidFormat: fal…}",
    "_locale": {
      "_calendar": {
        "sameDay": "[Today at] LT",
        "nextDay": "[Tomorrow at] LT",
        "nextWeek": "dddd [at] LT",
        "lastDay": "[Yesterday at] LT",
        "lastWeek": "[Last] dddd [at] LT",
        "sameElse": "L"
      },
      "_longDateFormat": {
        "LTS": "h:mm:ss A",
        "LT": "h:mm A",
        "L": "MM/DD/YYYY",
        "LL": "MMMM D, YYYY",
        "LLL": "MMMM D, YYYY h:mm A",
        "LLLL": "dddd, MMMM D, YYYY h:mm A"
      },
      "_invalidDate": "Invalid date",
      "ordinal": "Ζ’ ordinal() {}",
      "_dayOfMonthOrdinalParse": "/\\d{1,2}(th|st|nd|rd)/",
      "_relativeTime": {
        "future": "in %s",
        "past": "%s ago",
        "s": "a few seconds",
        "ss": "%d seconds",
        "m": "a minute",
        "mm": "%d minutes",
        "h": "an hour",
        "hh": "%d hours",
        "d": "a day",
        "dd": "%d days",
        "M": "a month",
        "MM": "%d months",
        "y": "a year",
        "yy": "%d years"
      },
      "_months": [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ],
      "_monthsShort": [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
      "_week": {
        "dow": 0,
        "doy": 6
      },
      "_weekdays": [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
      ],
      "_weekdaysMin": [
        "Su",
        "Mo",
        "Tu",
        "We",
        "Th",
        "Fr",
        "Sa"
      ],
      "_weekdaysShort": [
        "Sun",
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri",
        "Sat"
      ],
      "_meridiemParse": "/[ap]\\.?m?\\.?/i",
      "_abbr": "en",
      "_config": {
        "calendar": "{lastDay: \"[Yesterday at] LT\", lastWeek: \"[Last] dd…}",
        "longDateFormat": "{L: \"MM/DD/YYYY\", LL: \"MMMM D, YYYY\", LLL: \"MMMM D,…}",
        "invalidDate": "Invalid date",
        "ordinal": "Ζ’ ordinal() {}",
        "dayOfMonthOrdinalParse": "/\\d{1,2}(th|st|nd|rd)/",
        "relativeTime": "{M: \"a month\", MM: \"%d months\", d: \"a day\", dd: \"%d…}",
        "months": "[\"January\", \"February\", \"March\", \"April\", \"May\", \"J…]",
        "monthsShort": "[\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"…]",
        "week": "{dow: 0, doy: 6}",
        "weekdays": "[\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thurs…]",
        "weekdaysMin": "[\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"]",
        "weekdaysShort": "[\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"]",
        "meridiemParse": "/[ap]\\.?m?\\.?/i",
        "abbr": "en"
      },
      "_dayOfMonthOrdinalParseLenient": "/\\d{1,2}(th|st|nd|rd)|\\d{1,2}/",
      "calendar": "Ζ’ calendar() {}",
      "longDateFormat": "Ζ’ longDateFormat() {}",
      "invalidDate": "Ζ’ invalidDate() {}",
      "preparse": "Ζ’ preParsePostFormat() {}",
      "postformat": "Ζ’ preParsePostFormat() {}",
      "relativeTime": "Ζ’ relativeTime() {}",
      "pastFuture": "Ζ’ pastFuture() {}",
      "set": "Ζ’ set() {}",
      "months": "Ζ’ localeMonths() {}",
      "monthsShort": "Ζ’ localeMonthsShort() {}",
      "monthsParse": "Ζ’ localeMonthsParse() {}",
      "monthsRegex": "Ζ’ monthsRegex() {}",
      "monthsShortRegex": "Ζ’ monthsShortRegex() {}",
      "week": "Ζ’ localeWeek() {}",
      "firstDayOfYear": "Ζ’ localeFirstDayOfYear() {}",
      "firstDayOfWeek": "Ζ’ localeFirstDayOfWeek() {}",
      "weekdays": "Ζ’ localeWeekdays() {}",
      "weekdaysMin": "Ζ’ localeWeekdaysMin() {}",
      "weekdaysShort": "Ζ’ localeWeekdaysShort() {}",
      "weekdaysParse": "Ζ’ localeWeekdaysParse() {}",
      "weekdaysRegex": "Ζ’ weekdaysRegex() {}",
      "weekdaysShortRegex": "Ζ’ weekdaysShortRegex() {}",
      "weekdaysMinRegex": "Ζ’ weekdaysMinRegex() {}",
      "isPM": "Ζ’ localeIsPM() {}",
      "meridiem": "Ζ’ localeMeridiem() {}"
    },
    "_d": "Invalid Date",
    "_isValid": false,
    "add": "Ζ’ () {}",
    "calendar": "Ζ’ calendar$1() {}",
    "clone": "Ζ’ clone() {}",
    "diff": "Ζ’ diff() {}",
    "endOf": "Ζ’ endOf() {}",
    "format": "Ζ’ format() {}",
    "from": "Ζ’ from() {}",
    "fromNow": "Ζ’ fromNow() {}",
    "to": "Ζ’ to() {}",
    "toNow": "Ζ’ toNow() {}",
    "get": "Ζ’ stringGet() {}",
    "invalidAt": "Ζ’ invalidAt() {}",
    "isAfter": "Ζ’ isAfter() {}",
    "isBefore": "Ζ’ isBefore() {}",
    "isBetween": "Ζ’ isBetween() {}",
    "isSame": "Ζ’ isSame() {}",
    "isSameOrAfter": "Ζ’ isSameOrAfter() {}",
    "isSameOrBefore": "Ζ’ isSameOrBefore() {}",
    "isValid": "Ζ’ isValid$2() {}",
    "lang": "Ζ’ () {}",
    "locale": "Ζ’ locale() {}",
    "localeData": "Ζ’ localeData() {}",
    "max": "Ζ’ () {}",
    "min": "Ζ’ () {}",
    "parsingFlags": "Ζ’ parsingFlags() {}",
    "set": "Ζ’ stringSet() {}",
    "startOf": "Ζ’ startOf() {}",
    "subtract": "Ζ’ () {}",
    "toArray": "Ζ’ toArray() {}",
    "toObject": "Ζ’ toObject() {}",
    "toDate": "Ζ’ toDate() {}",
    "toISOString": "Ζ’ toISOString() {}",
    "inspect": "Ζ’ inspect() {}",
    "toJSON": "Ζ’ toJSON() {}",
    "toString": "Ζ’ toString() {}",
    "unix": "Ζ’ unix() {}",
    "valueOf": "Ζ’ valueOf() {}",
    "creationData": "Ζ’ creationData() {}",
    "year": "Ζ’ () {}",
    "isLeapYear": "Ζ’ getIsLeapYear() {}",
    "weekYear": "Ζ’ getSetWeekYear() {}",
    "isoWeekYear": "Ζ’ getSetISOWeekYear() {}",
    "quarters": "Ζ’ getSetQuarter() {}",
    "quarter": "Ζ’ getSetQuarter() {}",
    "month": "Ζ’ getSetMonth() {}",
    "daysInMonth": "Ζ’ getDaysInMonth() {}",
    "weeks": "Ζ’ getSetWeek() {}",
    "week": "Ζ’ getSetWeek() {}",
    "isoWeeks": "Ζ’ getSetISOWeek() {}",
    "isoWeek": "Ζ’ getSetISOWeek() {}",
    "weeksInYear": "Ζ’ getWeeksInYear() {}",
    "isoWeeksInYear": "Ζ’ getISOWeeksInYear() {}",
    "date": "Ζ’ () {}",
    "days": "Ζ’ getSetDayOfWeek() {}",
    "day": "Ζ’ getSetDayOfWeek() {}",
    "weekday": "Ζ’ getSetLocaleDayOfWeek() {}",
    "isoWeekday": "Ζ’ getSetISODayOfWeek() {}",
    "dayOfYear": "Ζ’ getSetDayOfYear() {}",
    "hours": "Ζ’ () {}",
    "hour": "Ζ’ () {}",
    "minutes": "Ζ’ () {}",
    "minute": "Ζ’ () {}",
    "seconds": "Ζ’ () {}",
    "second": "Ζ’ () {}",
    "milliseconds": "Ζ’ () {}",
    "millisecond": "Ζ’ () {}",
    "utcOffset": "Ζ’ getSetOffset() {}",
    "utc": "Ζ’ setOffsetToUTC() {}",
    "local": "Ζ’ setOffsetToLocal() {}",
    "parseZone": "Ζ’ setOffsetToParsedOffset() {}",
    "hasAlignedHourOffset": "Ζ’ hasAlignedHourOffset() {}",
    "isDST": "Ζ’ isDaylightSavingTime() {}",
    "isLocal": "Ζ’ isLocal() {}",
    "isUtcOffset": "Ζ’ isUtcOffset() {}",
    "isUtc": "Ζ’ isUtc() {}",
    "isUTC": "Ζ’ isUtc() {}",
    "zoneAbbr": "Ζ’ getZoneAbbr() {}",
    "zoneName": "Ζ’ getZoneName() {}",
    "dates": "Ζ’ () {}",
    "months": "Ζ’ () {}",
    "years": "Ζ’ () {}",
    "zone": "Ζ’ () {}",
    "isDSTShifted": "Ζ’ () {}"
  },
  "disabled": false,
  "onDateChange": "Ζ’ () {}",
  "focused": false,
  "numberOfMonths": 1,
  "isOutsideRange": "Ζ’ isOutsideRange() {}",
  "onFocusChange": "Ζ’ () {}",
  "noBorder": true,
  "displayFormat": "MM/DD/YYYY",
  "navPrev": "<PrevIcon />",
  "navNext": "<NextIcon />",
  "id": "birth_date-date",
  "placeholder": "Date",
  "required": false,
  "readOnly": false,
  "screenReaderInputMessage": "",
  "showClearDate": false,
  "showDefaultInputIcon": false,
  "inputIconPosition": "before",
  "customInputIcon": null,
  "customCloseIcon": null,
  "block": false,
  "small": false,
  "regular": false,
  "verticalSpacing": 22,
  "keepFocusOnInput": false,
  "orientation": "horizontal",
  "anchorDirection": "left",
  "openDirection": "down",
  "horizontalMargin": 0,
  "withPortal": false,
  "withFullScreenPortal": false,
  "appendToBody": false,
  "disableScroll": false,
  "initialVisibleMonth": null,
  "firstDayOfWeek": null,
  "keepOpenOnDateSelect": false,
  "reopenPickerOnClearDate": false,
  "renderCalendarInfo": null,
  "calendarInfoPosition": "bottom",
  "hideKeyboardShortcutsPanel": false,
  "daySize": 39,
  "isRTL": false,
  "verticalHeight": null,
  "horizontalMonthPadding": 13,
  "dayPickerNavigationInlineStyles": null,
  "navPosition": "navPositionTop",
  "renderNavPrevButton": null,
  "renderNavNextButton": null,
  "onPrevMonthClick": "Ζ’ onPrevMonthClick() {}",
  "onNextMonthClick": "Ζ’ onNextMonthClick() {}",
  "onClose": "Ζ’ onClose() {}",
  "renderMonthText": null,
  "renderWeekHeaderElement": null,
  "renderDayContents": null,
  "renderMonthElement": null,
  "enableOutsideDays": false,
  "isDayBlocked": "Ζ’ isDayBlocked() {}",
  "isDayHighlighted": "Ζ’ isDayHighlighted() {}",
  "monthFormat": "MMMM YYYY",
  "weekDayFormat": "dd",
  "phrases": {
    "calendarLabel": "Calendar",
    "roleDescription": "datepicker",
    "closeDatePicker": "Close",
    "clearDate": "Clear Date",
    "jumpToPrevMonth": "Move backward to switch to the previous month.",
    "jumpToNextMonth": "Move forward to switch to the next month.",
    "keyboardShortcuts": "Keyboard Shortcuts",
    "showKeyboardShortcutsPanel": "Open the keyboard shortcuts panel.",
    "hideKeyboardShortcutsPanel": "Close the shortcuts panel.",
    "openThisPanel": "Open this panel.",
    "enterKey": "Enter key",
    "leftArrowRightArrow": "Right and left arrow keys",
    "upArrowDownArrow": "up and down arrow keys",
    "pageUpPageDown": "page up and page down keys",
    "homeEnd": "Home and end keys",
    "escape": "Escape key",
    "questionMark": "Question mark",
    "selectFocusedDate": "Select the date in focus.",
    "moveFocusByOneDay": "Move backward (left) and forward (right) by one day.",
    "moveFocusByOneWeek": "Move backward (up) and forward (down) by one week.",
    "moveFocusByOneMonth": "Switch months.",
    "moveFocustoStartAndEndOfWeek": "Go to the first or last day of a week.",
    "returnFocusToInput": "Return to the date input field.",
    "keyboardForwardNavigationInstructions": "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.",
    "keyboardBackwardNavigationInstructions": "Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.",
    "chooseAvailableDate": "Ζ’ chooseAvailableDate() {}",
    "dateIsUnavailable": "Ζ’ dateIsUnavailable() {}",
    "dateIsSelected": "Ζ’ dateIsSelected() {}"
  }
}

This is problem specific to 'Firefox 96' on gnu/Linux. Google Chrome (97.0.4692.71) doesn't reproduce this problem.

Testcase: Use Storybook Date only widget and in Firefox 96 you'll get the following error:

https://docs.voltocms.com/storybook/?path=/story/widgets-datetime--datetime&args=dateOnly:true&globals=measureEnabled:false;backgrounds.grid:false

Firefox
image

Google Chrome
image

Good to know. We'll need a ticket on this.

1 Like

Aye, I have filed one for future reference.