Absolute imports in Create React App

#react #tutorial #todayisearched

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

Top comments (21)

Tri R.A. Wibowo • Apr 12 '20

Weird. This doesn't work for me :/

winkee01 • Sep 16 '20

try restart react app?

Tri R.A. Wibowo • Sep 16 '20

it turned out I need to set "baseUrl": "./src" instead of "baseUrl": "src" in my case.

Michał Bednarz • Apr 20 '20

What's the error? Is it during bundling or in runtime?

Tri R.A. Wibowo • Apr 21 '20 • Edited

No error log per se but the absolute import just didn't work so I need to resort to set NODE_PATH='src/' in .env to make it work which is already deprecated.

UAhmadSoft • Jun 8 '21

I tried this , It worked ......But when I tried to deploy my app on netlify , It failed on Build process with error
Cannot find module: 'components/Footer'. Make sure this package is installed.

How to use fix this on netlify ?

Paulo • Jan 21 '20 • Edited

This is great timing, I was just looking into how to do this and a solution that I tried using an .env file was not working, and this right here did the trick. Thanks a lot!