NumberPicker: "TypeError: Cannot read property 'apply' of undefined"

[lydia-schow]

Steps to reproduce:

1. Generate an app with create-react-app-typescript.
2. Add a <NumberPicker />

Expected: a number picker displays on the page, as show in documentation.

Actual: "TypeError: Cannot read property 'apply' of undefined"

decimalChar
node_modules/react-widgets/lib/util/localizers.js:48
  45 | decimalChar: function decimalChar() {
  46 |   var _numberLocalizer5;
  47 | 
> 48 |   return (_numberLocalizer5 = _numberLocalizer).decimalChar.apply(_numberLocalizer5, arguments);
  49 | },
  50 | precision: function precision() {
  51 |   var _numberLocalizer6;
View compiled
NumberPickerInput.getDefaultState
node_modules/react-widgets/lib/NumberInput.js:158
  155 |     editing = props.editing;
  156 | 
  157 | 
> 158 | var decimal = _localizers.number.decimalChar(null, culture),
  159 |     format = getFormat(props);
  160 | 
  161 | if (value == null || isNaN(value)) value = '';else value = editing ? ('' + value).replace('.', decimal) : _localizers.number.format(value, format, culture);
View compiled
new NumberPickerInput
node_modules/react-widgets/lib/NumberInput.js:134
  131 |     }
  132 |   };
  133 | 
> 134 |   _this.state = _this.getDefaultState();
  135 |   return _this;
  136 | }
  137 | 
View compiled
constructClassInstance
node_modules/react-dom/cjs/react-dom.development.js:6355
  6352 | var unmaskedContext = getUnmaskedContext(workInProgress);
  6353 | var needsContext = isContextConsumer(workInProgress);
  6354 | var context = needsContext ? getMaskedContext(workInProgress, unmaskedContext) : emptyObject;
> 6355 | var instance = new ctor(props, context);
  6356 | adoptClassInstance(workInProgress, instance);
  6357 | 
  6358 | // Cache unmasked context so we can avoid recreating masked context unless necessary.
View compiled
updateClassComponent
node_modules/react-dom/cjs/react-dom.development.js:7839
  7836 | if (current === null) {
  7837 |   if (!workInProgress.stateNode) {
  7838 |     // In the initial pass we might need to construct the instance.
> 7839 |     constructClassInstance(workInProgress, workInProgress.pendingProps);
  7840 |     mountClassInstance(workInProgress, renderExpirationTime);
  7841 |     shouldUpdate = true;
  7842 |   } else {
View compiled
beginWork
node_modules/react-dom/cjs/react-dom.development.js:8225
  8222 | case FunctionalComponent:
  8223 |   return updateFunctionalComponent(current, workInProgress);
  8224 | case ClassComponent:
> 8225 |   return updateClassComponent(current, workInProgress, renderExpirationTime);
  8226 | case HostRoot:
  8227 |   return updateHostRoot(current, workInProgress, renderExpirationTime);
  8228 | case HostComponent:
View compiled
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:10224
  10221 |   ReactDebugCurrentFiber.setCurrentFiber(workInProgress);
  10222 | }
  10223 | 
> 10224 | var next = beginWork(current, workInProgress, nextRenderExpirationTime);
  10225 | {
  10226 |   ReactDebugCurrentFiber.resetCurrentFiber();
  10227 | }
View compiled
workLoop
node_modules/react-dom/cjs/react-dom.development.js:10288
  10285 | if (nextRenderExpirationTime <= mostRecentCurrentTime) {
  10286 |   // Flush all expired work.
  10287 |   while (nextUnitOfWork !== null) {
> 10288 |     nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  10289 |   }
  10290 | } else {
  10291 |   // Flush asynchronous work until the deadline runs out of time.
View compiled
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:542
  539 |   // nested call would trigger the fake event handlers of any call higher
  540 |   // in the stack.
  541 |   fakeNode.removeEventListener(evtType, callCallback, false);
> 542 |   func.apply(context, funcArgs);
  543 |   didError = false;
  544 | }
  545 | 
View compiled
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:581
  578 | // errors, it will trigger our global error handler.
  579 | var evt = document.createEvent('Event');
  580 | evt.initEvent(evtType, false, false);
> 581 | fakeNode.dispatchEvent(evt);
  582 | 
  583 | if (didError) {
  584 |   if (!didSetError) {
View compiled
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:438
  435 |  * @param {...*} args Arguments for function
  436 |  */
  437 | invokeGuardedCallback: function (name, func, context, a, b, c, d, e, f) {
> 438 |   invokeGuardedCallback.apply(ReactErrorUtils, arguments);
  439 | },
  440 | 
  441 | /**
View compiled
renderRoot
node_modules/react-dom/cjs/react-dom.development.js:10366
  10363 | var didError = false;
  10364 | var error = null;
  10365 | {
> 10366 |   invokeGuardedCallback$1(null, workLoop, null, expirationTime);
  10367 |   if (hasCaughtError()) {
  10368 |     didError = true;
  10369 |     error = clearCaughtError();
View compiled
performWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:11014
  11011 |   root.remainingExpirationTime = commitRoot(finishedWork);
  11012 | } else {
  11013 |   root.finishedWork = null;
> 11014 |   finishedWork = renderRoot(root, expirationTime);
  11015 |   if (finishedWork !== null) {
  11016 |     // We've completed the root. Commit it.
  11017 |     root.remainingExpirationTime = commitRoot(finishedWork);
View compiled
performWork
node_modules/react-dom/cjs/react-dom.development.js:10967
  10964 | }
  10965 | 
  10966 | while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && (minExpirationTime === NoWork || nextFlushedExpirationTime <= minExpirationTime) && !deadlineDidExpire) {
> 10967 |   performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime);
  10968 |   // Find the next highest priority work.
  10969 |   findHighestPriorityRoot();
  10970 | }
View compiled
requestWork
node_modules/react-dom/cjs/react-dom.development.js:10878
  10875 | 
  10876 | // TODO: Get rid of Sync and use current time?
  10877 | if (expirationTime === Sync) {
> 10878 |   performWork(Sync, null);
  10879 | } else {
  10880 |   scheduleCallbackWithExpiration(expirationTime);
  10881 | }
View compiled
scheduleWorkImpl
node_modules/react-dom/cjs/react-dom.development.js:10732
  10729 |   var root = node.stateNode;
  10730 | 
  10731 |   checkRootNeedsClearing(root, fiber, expirationTime);
> 10732 |   requestWork(root, expirationTime);
  10733 |   checkRootNeedsClearing(root, fiber, expirationTime);
  10734 | } else {
  10735 |   {
View compiled
scheduleWork
node_modules/react-dom/cjs/react-dom.development.js:10689
  10686 | }
  10687 | 
  10688 | function scheduleWork(fiber, expirationTime) {
> 10689 |   return scheduleWorkImpl(fiber, expirationTime, false);
  10690 | }
  10691 | 
  10692 | function checkRootNeedsClearing(root, fiber, expirationTime) {
View compiled
scheduleTopLevelUpdate
node_modules/react-dom/cjs/react-dom.development.js:11193
  11190 |     next: null
  11191 |   };
  11192 |   insertUpdateIntoFiber(current, update);
> 11193 |   scheduleWork(current, expirationTime);
  11194 | }
  11195 | 
  11196 | function findHostInstance(fiber) {
View compiled
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:11231
  11228 |     container.pendingContext = context;
  11229 |   }
  11230 | 
> 11231 |   scheduleTopLevelUpdate(current, element, callback);
  11232 | },
  11233 | 
  11234 | 
View compiled
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:15226
  15223 |   root = container._reactRootContainer = newRoot;
  15224 |   // Initial mount should not be batched.
  15225 |   DOMRenderer.unbatchedUpdates(function () {
> 15226 |     DOMRenderer.updateContainer(children, newRoot, parentComponent, callback);
  15227 |   });
  15228 | } else {
  15229 |   DOMRenderer.updateContainer(children, root, parentComponent, callback);
View compiled
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:11102
  11099 |       isUnbatchingUpdates = false;
  11100 |     }
  11101 |   }
> 11102 |   return fn();
  11103 | }
  11104 | 
  11105 | // TODO: Batching should be implemented at the renderer level, not within
View compiled
renderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:15225
  15222 |   var newRoot = DOMRenderer.createContainer(container, shouldHydrate);
  15223 |   root = container._reactRootContainer = newRoot;
  15224 |   // Initial mount should not be batched.
> 15225 |   DOMRenderer.unbatchedUpdates(function () {
  15226 |     DOMRenderer.updateContainer(children, newRoot, parentComponent, callback);
  15227 |   });
  15228 | } else {
View compiled
render
node_modules/react-dom/cjs/react-dom.development.js:15290
  15287 |   return renderSubtreeIntoContainer(null, element, container, true, callback);
  15288 | },
  15289 | render: function (element, container, callback) {
> 15290 |   return renderSubtreeIntoContainer(null, element, container, false, callback);
  15291 | },
  15292 | unstable_renderSubtreeIntoContainer: function (parentComponent, element, containerNode, callback) {
  15293 |   !(parentComponent != null && has(parentComponent)) ? invariant(false, 'parentComponent must be a valid React Component') : void 0;
View compiled
render
src/index.tsx:9
   6 | import registerServiceWorker from './misc/registerServiceWorker';
   7 | 
   8 | const render = (Component: React.SFC) => {
>  9 |   ReactDOM.render(
  10 |     <AppContainer>
  11 |       <Component />
  12 |     </AppContainer>,
View compiled
./src/index.tsx
src/index.tsx:17
  14 |   );
  15 | };
  16 | 
> 17 | render(App);
  18 | 
  19 | // Webpack Hot Module Replacement API
  20 | if (module.hot) {

Other Dependancies: redux-form, semantic-ui-react

[jquense]

do you have a localizer configured correctly?

[lydia-schow]

@jquense I don't know. I just installed react-widgets as is. I have neither installed nor configured globalize nor moment.

[jquense]

Well then, that's the cause. Please check out the documentation for how to setup and use the localized components. Thanks!

[lydia-schow]

@jquense Heads up: the "localization" hyperlink on the NumberPicker.format page is broken.

[dianasaurio]

@jquense Heads up: the "localization" hyperlink on the NumberPicker.format page is broken.

This response helped me understand how to configure the number localizer correctly:

#731 (comment)