Absolute imports in Create React App

One of the things that held me back from Create React App was the lack of absolute imports. I loved them so much in my custom webpack config that I couldn't live without it. After a time I found that they can be configured in CRA too! Let's see how to do it.

Why do you need absolute imports?

During the development of the React app, you may encounter a situation like on the code below. Multiple, relative, nested imports. It's so hard to manage! And things are even worse when it comes to moving your code around a file structure.

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

import Icon from './../../components/icon';
import AuthorAvatar from './../../components/author-avatar';
import Date from './../../components/date';
import Image from './../../components/image';
import HtmlLink from './../../components/html-link';
import { SOURCES } from './../../config/defaultConfig';

import * as styles from './index.scss';

Absolute imports to the rescue!

Absolute imports can help you make that code a lot cleaner, more readable and manageable. We want to be able to transform our paths from this:

import useApi from './../../hooks/use-api';
import Date from './../../components/date';
import Image from './../../components/image';
import transfromUserData from './../../helpers/transform-user-data';
// etc...

to that:

import useApi from 'hooks/use-api';
import Date from 'components/date';
import Image from 'components/image';
import transfromUserData from 'helpers/transform-user-data';

Let's assume you have src with multiple directories where your code lives. We want to make src your base path for the imports.

The first step is to create jsconfig.json file (if it doesn't exist already) in root directory of your CRA app (tsconfig.json in case you used TypeScript template). Then add baseUrl configuration to it:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

That few simple lines will tell CRA config to use your src directory as a base for your imports so you can import your components with absolute paths. After that you can change imports in your code as presented below:

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import replace from 'lodash/replace';

import Icon from 'components/icon';
import AuthorAvatar from 'components/author-avatar';
import Date from 'components/date-representation';
import Image from 'components/image';
import HtmlLink from 'components/html-link';
import { SOURCES } from 'config';

import * as styles from './index.scss';

A lot cleaner and without ./../ mess. I hope you found it right on time! :)

Docs reference: https://create-react-app.dev/docs/importing-a-component#absolute-imports