Importing a typescript module to a JS module in a React app

Question

I have a React app created with create-react-app. Recently I've added some source code for a module I need. It's in Typescript and will stay in Typescript. Not my choice. I've installed what I needed to build Typescript and that part seems to work OK.

However, when I try importing that TS module to my regular jsx, it says module not found.

To illustrate:

shared/
    - MyTSModule/
        - index.tsx
    - OtherModule/
        - index.jsx
view/
    - MyView/
        - index.jsx

I'm trying to import MyTSModule to MyView. The error is: Module not found: Error: Can't resolve 'shared/MyTSModule' in...

I'm importing like all the other modules from shared:

import MyTSModule from 'shared/MyTSModule ';

What am I missing?

Are you only processing through typescript with js enabled?

Julian Kleine
– Julian Kleine

2020-02-17 10:14:47 +00:00
Commented Feb 17, 2020 at 10:14 — Julian Kleine
– Julian Kleine, Commented Feb 17, 2020 at 10:14

elderapo · Accepted Answer · 2020-02-17 10:14:58Z

3

You cannot import typescript file from javascript. You either need to:

compile typescript to javascript and then import compiled file
convert your javascript files to typescript.

I personally recommend porting all files to typescript, this way you will have more type safety.

answered Feb 17, 2020 at 10:14

elderapo

3572 silver badges13 bronze badges

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

1 Comment

dnmh Over a year ago

I thought compiling TS to JS would happen on the fly and that compiled JS would automatically be imported.

Collectives™ on Stack Overflow

Importing a typescript module to a JS module in a React app

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related