TypeScript baseUrl Configuration

Overview

Depending on your project structure, sometimes you'll end up with longer relative imports like this:

import { Thing } from "../../../../../components/thing";

We can utilize TypeScript's baseUrl module to help resolve non-absolute module names. Doing so will allow us to change the above to:

import { Thing } from "~/components/thing";

Project Dependencies

yarn add -D babel-plugin-root-import

TypeScript Configuration Changes

Open tsconfig.json and add the baseUrl and path properties:

{
  // ...
  "baseUrl": "./",
  // the following assumes Ignite's app/ structure, however yours may differ
  "paths": { "~/*": ["app/*"] }
}

Babel Configuration Changes

Open babel.config.js and add the following plugin array object:

[
  "babel-plugin-root-import",
  {
    root: __dirname,
    rootPathPrefix: "~/",
    // mapping ~/ to the ./app directory (again, your app structure may differ here)
    rootPathSuffix: "app",
  },
],

Taste Test in a Component!

Open up ./app/screens/DemoShowroomScreen.tsx and let's update the relative imports from:

import { ListItem, Screen, Text } from "../../components";
import { isRTL } from "../../i18n";
import { DemoTabScreenProps } from "../../navigators/DemoNavigator";
import { colors, spacing } from "../../theme";

to

import { ListItem, Screen, Text } from "~/components";
import { isRTL } from "~/i18n";
import { DemoTabScreenProps } from "~/navigators/DemoNavigator";
import { colors, spacing } from "~/theme";

Fire up the app and make sure everything still works!

yarn expo:start

Note: if you receive an error about not being able to resolve the components, you may have to clear your bundler cache via

yarn expo:start --clear

Resources

• TypeScript baseUrl Documentation