react-input-mask: Can't import InputMask

I’ve created the following very basic component to start:

import * as React from 'react';
import InputMask from 'react-input-mask';

export const NumericFormControl: React.SFC = () => {
  return <InputMask mask="99/99/9999" />;
};

I’m calling it from another component called LineItems simply like this:

<NumericFormControl />

Here is the error I get:

warning.js:33 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports. in Unknown (created by LineItems) in div (created by Fieldset) in Fieldset (created by Connect(Fieldset)) in Connect(Fieldset) (created by Modeled(Connect(Fieldset))) in Modeled(Connect(Fieldset)) (created by LineItems) in LineItems (created by SingleTransactionBasicContainer) in SingleTransactionBasicContainer (created by Connect(SingleTransactionBasicContainer)) in Connect(SingleTransactionBasicContainer) (created by SingleTransactionContainer) in div (created by TabPanel) in TabPanel in div in div (created by UncontrolledTabs) in UncontrolledTabs (created by Tabs) in Tabs in Unknown (created by SingleTransactionContainer) in div (created by SingleTransactionContainer) in div (created by SingleTransactionContainer) in form (created by Form) in Form (created by Connect(Form)) in Connect(Form) (created by SingleTransactionContainer) in div (created by SingleTransactionContainer) in SingleTransactionContainer (created by Connect(SingleTransactionContainer)) in Connect(SingleTransactionContainer) (created by Route) in Route (created by TransactionTester) in Switch (created by TransactionTester) in div (created by TransactionTester) in Route (created by TransactionTester) in TransactionTester (created by Route) in Route (created by TsRoot) in Switch (created by TsRoot) in div (created by TsRoot) in Route (created by TsRoot) in TsRoot in div (created by App) in div (created by View) in View (created by Frame) in div (created by View) in View (created by Frame) in div (created by StyleRoot) in StyleRoot (created by Root) in Root (created by Frame) in Frame (created by App) in Router (created by ConnectedRouter) in ConnectedRouter (created by App) in App (created by Connect(App)) in Connect(App) in Provider printWarning @ warning.js:33 warning @ warning.js:57 createElementWithValidation @ react.development.js:1351 ./src/ts-root/components/forms/numeric-form-control.tsx.exports.NumericFormControl @ numeric-form-control.tsx:35 mountIndeterminateComponent @ react-dom.development.js:13272 beginWork @ react-dom.development.js:13711 performUnitOfWork @ react-dom.development.js:15741 workLoop @ react-dom.development.js:15780 renderRoot @ react-dom.development.js:15820 performWorkOnRoot @ react-dom.development.js:16437 performWork @ react-dom.development.js:16358 performSyncWork @ react-dom.development.js:16330 requestWork @ react-dom.development.js:16230 scheduleWork$1 @ react-dom.development.js:16096 enqueueSetState @ react-dom.development.js:11185 ./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:273 (anonymous) @ single-transaction.tsx:121 step @ tslib.es6.js:91 (anonymous) @ tslib.es6.js:72 fulfilled @ tslib.es6.js:62 Promise.then (async) step @ tslib.es6.js:64 (anonymous) @ tslib.es6.js:65 __awaiter @ tslib.es6.js:61 SingleTransactionContainer.loadData @ single-transaction.tsx:112 SingleTransactionContainer.componentDidMount @ single-transaction.tsx:110 commitLifeCycles @ react-dom.development.js:14248 commitAllLifeCycles @ react-dom.development.js:15342 callCallback @ react-dom.development.js:100 invokeGuardedCallbackDev @ react-dom.development.js:138 invokeGuardedCallback @ react-dom.development.js:187 commitRoot @ react-dom.development.js:15481 completeRoot @ react-dom.development.js:16496 performWorkOnRoot @ react-dom.development.js:16440 performWork @ react-dom.development.js:16358 performSyncWork @ react-dom.development.js:16330 requestWork @ react-dom.development.js:16230 scheduleWork$1 @ react-dom.development.js:16096 scheduleRootUpdate @ react-dom.development.js:16663 updateContainerAtExpirationTime @ react-dom.development.js:16690 updateContainer @ react-dom.development.js:16717 ./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17000 (anonymous) @ react-dom.development.js:17140 unbatchedUpdates @ react-dom.development.js:16557 legacyRenderSubtreeIntoContainer @ react-dom.development.js:17136 render @ react-dom.development.js:17195 ./src/index.js @ index.js:21 webpack_require @ bootstrap:19 0 @ bundle.js:363882 webpack_require @ bootstrap:19 …/oseries-components/node_modules/attr-accept/dist/index.js @ bootstrap:83 (anonymous) @ bootstrap:83 warning.js:33 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports. in Unknown (created by LineItems) in div (created by Fieldset) in Fieldset (created by Connect(Fieldset)) in Connect(Fieldset) (created by Modeled(Connect(Fieldset))) in Modeled(Connect(Fieldset)) (created by LineItems) in LineItems (created by SingleTransactionBasicContainer) in SingleTransactionBasicContainer (created by Connect(SingleTransactionBasicContainer)) in Connect(SingleTransactionBasicContainer) (created by SingleTransactionContainer) in div (created by TabPanel) in TabPanel in div in div (created by UncontrolledTabs) in UncontrolledTabs (created by Tabs) in Tabs in Unknown (created by SingleTransactionContainer) in div (created by SingleTransactionContainer) in div (created by SingleTransactionContainer) in form (created by Form) in Form (created by Connect(Form)) in Connect(Form) (created by SingleTransactionContainer) in div (created by SingleTransactionContainer) in SingleTransactionContainer (created by Connect(SingleTransactionContainer)) in Connect(SingleTransactionContainer) (created by Route) in Route (created by TransactionTester) in Switch (created by TransactionTester) in div (created by TransactionTester) in Route (created by TransactionTester) in TransactionTester (created by Route) in Route (created by TsRoot) in Switch (created by TsRoot) in div (created by TsRoot) in Route (created by TsRoot) in TsRoot in div (created by App) in div (created by View) in View (created by Frame) in div (created by View) in View (created by Frame) in div (created by StyleRoot) in StyleRoot (created by Root) in Root (created by Frame) in Frame (created by App) in Router (created by ConnectedRouter) in ConnectedRouter (created by App) in App (created by Connect(App)) in Connect(App) in Provider printWarning @ warning.js:33 warning @ warning.js:57 createElementWithValidation @ react.development.js:1351 ./src/ts-root/components/forms/numeric-form-control.tsx.exports.NumericFormControl @ numeric-form-control.tsx:35 mountIndeterminateComponent @ react-dom.development.js:13272 beginWork @ react-dom.development.js:13711 performUnitOfWork @ react-dom.development.js:15741 workLoop @ react-dom.development.js:15780 callCallback @ react-dom.development.js:100 invokeGuardedCallbackDev @ react-dom.development.js:138 invokeGuardedCallback @ react-dom.development.js:187 replayUnitOfWork @ react-dom.development.js:15194 renderRoot @ react-dom.development.js:15840 performWorkOnRoot @ react-dom.development.js:16437 performWork @ react-dom.development.js:16358 performSyncWork @ react-dom.development.js:16330 requestWork @ react-dom.development.js:16230 scheduleWork$1 @ react-dom.development.js:16096 enqueueSetState @ react-dom.development.js:11185 ./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:273 (anonymous) @ single-transaction.tsx:121 step @ tslib.es6.js:91 (anonymous) @ tslib.es6.js:72 fulfilled @ tslib.es6.js:62 Promise.then (async) step @ tslib.es6.js:64 (anonymous) @ tslib.es6.js:65 __awaiter @ tslib.es6.js:61 SingleTransactionContainer.loadData @ single-transaction.tsx:112 SingleTransactionContainer.componentDidMount @ single-transaction.tsx:110 commitLifeCycles @ react-dom.development.js:14248 commitAllLifeCycles @ react-dom.development.js:15342 callCallback @ react-dom.development.js:100 invokeGuardedCallbackDev @ react-dom.development.js:138 invokeGuardedCallback @ react-dom.development.js:187 commitRoot @ react-dom.development.js:15481 completeRoot @ react-dom.development.js:16496 performWorkOnRoot @ react-dom.development.js:16440 performWork @ react-dom.development.js:16358 performSyncWork @ react-dom.development.js:16330 requestWork @ react-dom.development.js:16230 scheduleWork$1 @ react-dom.development.js:16096 scheduleRootUpdate @ react-dom.development.js:16663 updateContainerAtExpirationTime @ react-dom.development.js:16690 updateContainer @ react-dom.development.js:16717 ./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17000 (anonymous) @ react-dom.development.js:17140 unbatchedUpdates @ react-dom.development.js:16557 legacyRenderSubtreeIntoContainer @ react-dom.development.js:17136 render @ react-dom.development.js:17195 ./src/index.js @ index.js:21 webpack_require @ bootstrap:19 0 @ bundle.js:363882 webpack_require @ bootstrap:19 …/oseries-components/node_modules/attr-accept/dist/index.js @ bootstrap:83 (anonymous) @ bootstrap:83 invariant.js:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports. at invariant (invariant.js:42) at getFiberTagFromObjectType (react-dom.development.js:9647) at createFiberFromElement (react-dom.development.js:9607) at reconcileSingleElement (react-dom.development.js:12475) at reconcileChildFibers (react-dom.development.js:12531) at reconcileChildrenAtExpirationTime (react-dom.development.js:12902) at reconcileChildren (react-dom.development.js:12893) at mountIndeterminateComponent (react-dom.development.js:13333) at beginWork (react-dom.development.js:13711) at performUnitOfWork (react-dom.development.js:15741) invariant @ invariant.js:42 getFiberTagFromObjectType @ react-dom.development.js:9647 createFiberFromElement @ react-dom.development.js:9607 reconcileSingleElement @ react-dom.development.js:12475 reconcileChildFibers @ react-dom.development.js:12531 reconcileChildrenAtExpirationTime @ react-dom.development.js:12902 reconcileChildren @ react-dom.development.js:12893 mountIndeterminateComponent @ react-dom.development.js:13333 beginWork @ react-dom.development.js:13711 performUnitOfWork @ react-dom.development.js:15741 workLoop @ react-dom.development.js:15780 callCallback @ react-dom.development.js:100 invokeGuardedCallbackDev @ react-dom.development.js:138 invokeGuardedCallback @ react-dom.development.js:187 replayUnitOfWork @ react-dom.development.js:15194 renderRoot @ react-dom.development.js:15840 performWorkOnRoot @ react-dom.development.js:16437 performWork @ react-dom.development.js:16358 performSyncWork @ react-dom.development.js:16330 requestWork @ react-dom.development.js:16230 scheduleWork$1 @ react-dom.development.js:16096 enqueueSetState @ react-dom.development.js:11185 ./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:273 (anonymous) @ single-transaction.tsx:121 step @ tslib.es6.js:91 (anonymous) @ tslib.es6.js:72 fulfilled @ tslib.es6.js:62 Promise.then (async) step @ tslib.es6.js:64 (anonymous) @ tslib.es6.js:65 __awaiter @ tslib.es6.js:61 SingleTransactionContainer.loadData @ single-transaction.tsx:112 SingleTransactionContainer.componentDidMount @ single-transaction.tsx:110 commitLifeCycles @ react-dom.development.js:14248 commitAllLifeCycles @ react-dom.development.js:15342 callCallback @ react-dom.development.js:100 invokeGuardedCallbackDev @ react-dom.development.js:138 invokeGuardedCallback @ react-dom.development.js:187 commitRoot @ react-dom.development.js:15481 completeRoot @ react-dom.development.js:16496 performWorkOnRoot @ react-dom.development.js:16440 performWork @ react-dom.development.js:16358 performSyncWork @ react-dom.development.js:16330 requestWork @ react-dom.development.js:16230 scheduleWork$1 @ react-dom.development.js:16096 scheduleRootUpdate @ react-dom.development.js:16663 updateContainerAtExpirationTime @ react-dom.development.js:16690 updateContainer @ react-dom.development.js:16717 ./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17000 (anonymous) @ react-dom.development.js:17140 unbatchedUpdates @ react-dom.development.js:16557 legacyRenderSubtreeIntoContainer @ react-dom.development.js:17136 render @ react-dom.development.js:17195 ./src/index.js @ index.js:21 webpack_require @ bootstrap:19 0 @ bundle.js:363882 webpack_require @ bootstrap:19 …/oseries-components/node_modules/attr-accept/dist/index.js @ bootstrap:83 (anonymous) @ bootstrap:83 react-dom.development.js:14113 The above error occurred in one of your React components: in Unknown (created by LineItems) in div (created by Fieldset) in Fieldset (created by Connect(Fieldset)) in Connect(Fieldset) (created by Modeled(Connect(Fieldset))) in Modeled(Connect(Fieldset)) (created by LineItems) in LineItems (created by SingleTransactionBasicContainer) in SingleTransactionBasicContainer (created by Connect(SingleTransactionBasicContainer)) in Connect(SingleTransactionBasicContainer) (created by SingleTransactionContainer) in div (created by TabPanel) in TabPanel in div in div (created by UncontrolledTabs) in UncontrolledTabs (created by Tabs) in Tabs in Unknown (created by SingleTransactionContainer) in div (created by SingleTransactionContainer) in div (created by SingleTransactionContainer) in form (created by Form) in Form (created by Connect(Form)) in Connect(Form) (created by SingleTransactionContainer) in div (created by SingleTransactionContainer) in SingleTransactionContainer (created by Connect(SingleTransactionContainer)) in Connect(SingleTransactionContainer) (created by Route) in Route (created by TransactionTester) in Switch (created by TransactionTester) in div (created by TransactionTester) in Route (created by TransactionTester) in TransactionTester (created by Route) in Route (created by TsRoot) in Switch (created by TsRoot) in div (created by TsRoot) in Route (created by TsRoot) in TsRoot in div (created by App) in div (created by View) in View (created by Frame) in div (created by View) in View (created by Frame) in div (created by StyleRoot) in StyleRoot (created by Root) in Root (created by Frame) in Frame (created by App) in Router (created by ConnectedRouter) in ConnectedRouter (created by App) in App (created by Connect(App)) in Connect(App) in Provider

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:14113 logError @ react-dom.development.js:14152 update.callback @ react-dom.development.js:14809 callCallback @ react-dom.development.js:10764 commitUpdateQueue @ react-dom.development.js:10808 commitLifeCycles @ react-dom.development.js:14283 commitAllLifeCycles @ react-dom.development.js:15342 callCallback @ react-dom.development.js:100 invokeGuardedCallbackDev @ react-dom.development.js:138 invokeGuardedCallback @ react-dom.development.js:187 commitRoot @ react-dom.development.js:15481 completeRoot @ react-dom.development.js:16496 performWorkOnRoot @ react-dom.development.js:16440 performWork @ react-dom.development.js:16358 performSyncWork @ react-dom.development.js:16330 requestWork @ react-dom.development.js:16230 scheduleWork$1 @ react-dom.development.js:16096 enqueueSetState @ react-dom.development.js:11185 ./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:273 (anonymous) @ single-transaction.tsx:121 step @ tslib.es6.js:91 (anonymous) @ tslib.es6.js:72 fulfilled @ tslib.es6.js:62 Promise.then (async) step @ tslib.es6.js:64 (anonymous) @ tslib.es6.js:65 __awaiter @ tslib.es6.js:61 SingleTransactionContainer.loadData @ single-transaction.tsx:112 SingleTransactionContainer.componentDidMount @ single-transaction.tsx:110 commitLifeCycles @ react-dom.development.js:14248 commitAllLifeCycles @ react-dom.development.js:15342 callCallback @ react-dom.development.js:100 invokeGuardedCallbackDev @ react-dom.development.js:138 invokeGuardedCallback @ react-dom.development.js:187 commitRoot @ react-dom.development.js:15481 completeRoot @ react-dom.development.js:16496 performWorkOnRoot @ react-dom.development.js:16440 performWork @ react-dom.development.js:16358 performSyncWork @ react-dom.development.js:16330 requestWork @ react-dom.development.js:16230 scheduleWork$1 @ react-dom.development.js:16096 scheduleRootUpdate @ react-dom.development.js:16663 updateContainerAtExpirationTime @ react-dom.development.js:16690 updateContainer @ react-dom.development.js:16717 ./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17000 (anonymous) @ react-dom.development.js:17140 unbatchedUpdates @ react-dom.development.js:16557 legacyRenderSubtreeIntoContainer @ react-dom.development.js:17136 render @ react-dom.development.js:17195 ./src/index.js @ index.js:21 webpack_require @ bootstrap:19 0 @ bundle.js:363882 webpack_require @ bootstrap:19 …/oseries-components/node_modules/attr-accept/dist/index.js @ bootstrap:83 (anonymous) @ bootstrap:83 invariant.js:42 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports. at invariant (invariant.js:42) at getFiberTagFromObjectType (react-dom.development.js:9647) at createFiberFromElement (react-dom.development.js:9607) at reconcileSingleElement (react-dom.development.js:12475) at reconcileChildFibers (react-dom.development.js:12531) at reconcileChildrenAtExpirationTime (react-dom.development.js:12902) at reconcileChildren (react-dom.development.js:12893) at mountIndeterminateComponent (react-dom.development.js:13333) at beginWork (react-dom.development.js:13711) at performUnitOfWork (react-dom.development.js:15741)

The You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports message means that I’m importing something wrong, but InputMask is the default export.

Any ideas?