Importing javascript function into Typescript file: function is seen as namespace

Question

I'm trying to import a plain javascript function into a typescript file. I'm working on a React Native app.

The import is working when its just JS, but on TS I get the error: Cannot use namespace 'PrimaryButton' as a type

The javascript function resides in a node module which exports its function as such in its index.js:

export {default as PrimaryButton} from './src/components/PrimaryButton.js';

The node module is called component-library, it is a company own node module. It does not contain any types at all, only plain JS.

I have included a custom.d.ts file in the RN app where I declare component-library as a module to avoid TS errors on import:

declare module 'component-library';

Now, when trying to import the PrimaryButton function, I get the error Cannot use namespace 'PrimaryButton' as a type.

What is the easiest way to enable to import of the PrimaryButton function without errors? I'm pretty new to Typescript and kind of lost here.

What does PrimaryButton.js look like? Specifically the part exporting the function you're trying to import? — T.J. Crowder
– T.J. Crowder, Commented Mar 3, 2022 at 16:58
It's a default function export: export default function PrimaryButton(props) {...} — Thijs
– Thijs, Commented Mar 3, 2022 at 18:30

Thijs · Accepted Answer · 2022-03-03 18:35:19Z

1

Ended up being something really simple... The file had the .ts extension instead of .tsx, so when using the tsx syntax it was detected as a type instead because of the <Component> notation.

answered Mar 3, 2022 at 18:35

Thijs

7481 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Importing javascript function into Typescript file: function is seen as namespace

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related