react-input-mask icon indicating copy to clipboard operation
react-input-mask copied to clipboard

Published 20 hours ago • verified publisher icon sanniassin

Can't import InputMask

Open mellis481 opened this issue 6 years ago • 16 comments

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?

mellis481 avatar Jul 18 '18 19:07 mellis481

Need a demo repo to investigate.

sanniassin avatar Jul 20 '18 12:07 sanniassin

Im getting exact the same error using just the basic in typescript.

matheuscouto avatar Aug 29 '18 18:08 matheuscouto

@matheuscouto Still need a demo, because it works fine in a simple CRA-generated TS project create-react-app input-app --scripts-version=react-scripts-ts

App.js

import * as React from 'react';
import InputMask from 'react-input-mask';
import './App.css';

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

export default App;

sanniassin avatar Aug 29 '18 19:08 sanniassin

We just had this crop up. Here's some steps to reproduce:

create-react-app input-app --scripts-version=react-scripts-ts
cd input-app
yarn add react-input-mask && yarn add --dev @types/react-input-mask
yarn test

It's just like your above example, except that it outputs the error only when run in a test environment (Jest, in the CRA example). I used this App.tsx and it fixed the issue:

import * as React from "react";
import ReactInputMask from "react-input-mask";

export const createInputMask = () => {
  const Component =
    process.env.NODE_ENV === "test"
      ? require("react-input-mask")
      : ReactInputMask;

  return Component;
};

const InputMask = createInputMask();

const App: React.SFC = () => <InputMask mask="99/99/9999" />;

export default App;

esmevane avatar Oct 03 '18 20:10 esmevane

Hey, just chiming in again: I've narrowed the issue down to the compilerOptions.module setting in tsconfig.json; in our case, using the "commonjs" value was causing the issue.

esmevane avatar Oct 05 '18 14:10 esmevane

Is there any plans of fixing this issue?

Englund0110 avatar Dec 20 '18 11:12 Englund0110

Came across this issue again, and fixed it by using:

const InputMask = require("react-input-mask") instead of import InputMask from "react-input-mask"

Englund0110 avatar Apr 03 '19 07:04 Englund0110

yarn add @types/react-input-mask -D works for me, thanks!

chatman-media avatar Apr 25 '19 11:04 chatman-media

Hey, just chiming in again: I've narrowed the issue down to the compilerOptions.module setting in tsconfig.json; in our case, using the "commonjs" value was causing the issue.

I have the same issue

iamnnort avatar Apr 26 '19 13:04 iamnnort

Just const InputMask = require('react-input-mask'); - works

iamnnort avatar Apr 26 '19 13:04 iamnnort

I used import * as InputMask from "react-input-mask" in .ts file and it worked properly

singvarr avatar Jul 05 '19 12:07 singvarr

yarn add @types/react-input-mask -D works for me, thanks!

Same for me.

carlos-cne avatar Jul 18 '19 17:07 carlos-cne

Just const InputMask = require('react-input-mask'); - works

You can also use import InputMask = require('react-input-mask'); and it will work, but types will be missing.

I'm trying to investigate and figure out the reason of the issue, but don't have enough time for that, unfortunately.

So far what I see is that react-input-mask generates node modules, which is not really accepted nicely from ts.

As soon as I use import ReactInputMask from 'react-input-mask'; it compiles to JS code that references .default property of ReactInputMask object, which is missing, so no doubts why this problem arises.

I have tried to fix definitions, but it looks like it's more something with the way how react-input-mask compiles...

Would appreciate some help :)

shytikov avatar Oct 22 '19 09:10 shytikov

Hey, just chiming in again: I've narrowed the issue down to the compilerOptions.module setting in tsconfig.json; in our case, using the "commonjs" value was causing the issue.

Nice one!!! I don't know what could be standard module resolution in TS 3.6.3, but I have changed it to es6 and it worked finally! And with types!

shytikov avatar Oct 22 '19 10:10 shytikov

For me, the solution was exclude folder node_modules and install again

LuucasQ avatar Feb 08 '23 13:02 LuucasQ

Hey, just chiming in again: I've narrowed the issue down to the compilerOptions.module setting in tsconfig.json; in our case, using the "commonjs" value was causing the issue.

Nice one!!! I don't know what could be standard module resolution in TS 3.6.3, but I have changed it to es6 and it worked finally! And with types!

In version 14 of Next.js it is necessary to use "esnext" for dynamic import to work.

daywison-flapper avatar Nov 28 '23 21:11 daywison-flapper