loading...
Cover image for Absolute imports in Create React App

Absolute imports in Create React App

mr_frontend profile image Michał Bednarz Updated on ・2 min read

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.

Example structure of your src

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

Discussion

pic
Editor guide
Collapse
pszndr profile image
Paulo

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!

Collapse
mr_frontend profile image
Michał Bednarz Author

Love to hear that!

Collapse
dorklord23 profile image
Tri R.A. Wibowo

Weird. This doesn't work for me :/

Collapse
winkee01 profile image
winkee01

try restart react app?

Collapse
dorklord23 profile image
Tri R.A. Wibowo

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

Collapse
mr_frontend profile image
Michał Bednarz Author

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

Collapse
dorklord23 profile image
Tri R.A. Wibowo

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.

Collapse
ruanengelbrecht profile image
Collapse
matias_hevich profile image
Matias Hevich

THANKS A LOT!

Collapse
kouatchres profile image
KOUATCHOUA MARK

It couldn't have been this simple. Kudos Bro.

Collapse
nafronte profile image
htmlcode

Thanks a lot! Have you any tips in case if I want organize paths for styles structure? What should I do with imports in scss files?

Collapse
imvsnu profile image
imvsnu

Thanks a lot.