Need help migrating

[maraujop]

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]

Does it work if you get rid of the rootDir property? That setting isn't useful for react-native-typescript-transformer projects.

On 6 Oct 2017 12:50 pm, "Miguel Araujo" notifications@github.com wrote:

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

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ds300/react-native-typescript-transformer/issues/32, or mute the thread https://github.com/notifications/unsubscribe-auth/ABL1qfaWa-Z9m0FJrHWD0y9VOIRbXxkZks5sphPvgaJpZM4PwXse .

[ds300]

You might have to add some extra configuration in tsconfig to make it work with 'example/src...' paths. See the section on absolute paths in the readme for how I've set it up in the past

On 6 Oct 2017 12:55 pm, "david sheldrick" d.j.sheldrick@gmail.com wrote:

Does it work if you get rid of the rootDir property? That setting isn't useful for react-native-typescript-transformer projects.

On 6 Oct 2017 12:50 pm, "Miguel Araujo" notifications@github.com wrote:

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

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ds300/react-native-typescript-transformer/issues/32, or mute the thread https://github.com/notifications/unsubscribe-auth/ABL1qfaWa-Z9m0FJrHWD0y9VOIRbXxkZks5sphPvgaJpZM4PwXse .

[ds300]

Just had a look at the typescript docs and

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

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

[maraujop]

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]

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 :pray: