sanniassin
commented
6 years ago Need a demo repo to investigate.
Open mellis481 opened 6 years ago
sanniassin
commented
6 years ago Need a demo repo to investigate.
matheuscouto
commented
6 years ago Im getting exact the same error using just the basic in typescript.
sanniassin
commented
6 years ago @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;
esmevane
commented
5 years ago 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 testIt'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;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.
Englund0110
commented
5 years ago Is there any plans of fixing this issue?
Englund0110
commented
5 years ago Came across this issue again, and fixed it by using:
const InputMask = require("react-input-mask") instead of import InputMask from "react-input-mask"
chatman-media
commented
5 years ago yarn add @types/react-input-mask -D works for me, thanks!
iamnnort
commented
5 years ago Hey, just chiming in again: I've narrowed the issue down to the
compilerOptions.modulesetting intsconfig.json; in our case, using the"commonjs"value was causing the issue.
I have the same issue
iamnnort
commented
5 years ago Just const InputMask = require('react-input-mask'); - works
singvarr
commented
5 years ago I used import * as InputMask from "react-input-mask" in .ts file and it worked properly
carlos-cne
commented
5 years ago
yarn add @types/react-input-mask -Dworks for me, thanks!
Same for me.
shytikov
commented
4 years ago 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
commented
4 years ago Hey, just chiming in again: I've narrowed the issue down to the
compilerOptions.modulesetting intsconfig.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!
LuucasQ
commented
1 year ago For me, the solution was exclude folder node_modules and install again
daywison-flapper
commented
9 months ago Hey, just chiming in again: I've narrowed the issue down to the
compilerOptions.modulesetting intsconfig.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
es6and it worked finally! And with types!
In version 14 of Next.js it is necessary to use "esnext" for dynamic import to work.
I've created the following very basic component to start:
I'm calling it from another component called
LineItemssimply like this:Here is the error I get:
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
InputMaskis the default export.Any ideas?