ds300 / react-native-typescript-transformer

Seamlessly use TypeScript with React Native
MIT License
657 stars 50 forks source link

Add note in README about using absolute paths for source modules #25

Closed ds300 closed 7 years ago

ds300 commented 7 years ago

I think a lot of people use absolute paths these days and it is not clear that both typescript and react-native (and maybe jest or some other test framework) need to be configured independently to support them. As evidenced by #24

agarcia17 commented 7 years ago

anybody got the absolute paths working?

ds300 commented 7 years ago

Yes it's fairly simple.

In tsconfig.json:

 {
   "compilerOptions": {
+    "baseUrl": "."
   }
 }

And then for react-native, you need to add one or more package.json files. These only need to contain the "name" field, and should be placed into any folders in the root of your project that you want to reference with an absolute path. The "name" field's value should be the name of the folder. So for me, I just added one file at src/package.json with the contents {"name": "src"}.

Then if you use jest, add the following in your root package.json:

 {
   "jest" {
+     "modulePaths": ["<rootDir>"]
   }
 }

And you should be good to go. e.g. for the folder structure

<rootDir>
├── src
│   ├── package.json
│   ├── App.tsx
│   ├── components
│   │   ├── Banana.tsx
│   ├── index.tsx
├── package.json
├── tsconfig.json

you can, e.g. import Banana from 'src/components/Banana' from any .ts(x) file

Thanks for reminding me to put this in the Readme, and let me know if you run into any issues with the instructions.