ds300/react-native-typescript-transformer

Need help migrating

maraujop opened this issue · 5 comments

maraujop commented

Hello David,

I've found your project today when looking for a simple plug-and-play solution to start using TypeScript with RN, great project!

I have quite a big react native project built with Flow, which I'm totally fed up of. I want to try Typescript, but I need to do it in a progressive way.

So I've installed react-native-typescript-transformer and decided to change one of my components extension to .tsx. My intention, if it's possible, is to have a mix of .js and .tsx files, until I get to a point where there a no .js files anymore.

As soon as I change the extension of this component the packager fails:

error: bundling failed: "TransformError: /Users/map/repos/example/app/screens/Splash.tsx: File '/Users/map/repos/example/app/screens/Splash.tsx' is not under 'rootDir' 'app'. 'rootDir' is expected to contain all source files."

My project hierarchy simplified looks like this:

app/
  > screens/
      Splash.tsx
      Header.js
tsconfig.json
index.ios.js
index.android.js
package.json

I'm also doing absolute imports in my project like:

import Header from 'example/app/screens/Header'

This works beacause my package.json in the project root, has "name": "example". I've tried creating a package.json within app directory containing:

{"name": "app"}

But it hasn't worked. Not sure what rootDir and baseUrl should be in tsconfing.json. is there a way to make this setup work ?

Thanks, cheers
Miguel

ds300 commented
ds300 commented
ds300 commented

Just had a look at the typescript docs and

 {
   "compilerOptions": {
+    "paths": {"example": "."}
   }
 }

should do the trick. Along with removing the rootDir property.

maraujop commented

Thanks David for your super fast answer,

You are right, removing rootDir property gets it all working, wonderful! the transformation works even with absolute imports example/app/screens/...

The problem is that ts reports for these imports an error:
Cannot find module 'example/app/screens/Header' and doesn't validate the component properties.

If I change example/app/screens/Header to app/screens/Header it works. Your path settings, seems to not be working?

Thanks, cheers
Miguel

ds300 commented

I'm going to close this issue due to inactivity. If you're still having trouble with imports, please feel free to open another issue and link to this one 🙏