Super Clean, Refactor-Friendly Import Statements in React

In this article, learn a small trick to make your import statements a lot cleaner, and easier to refactor.

With the latest release of create-react-app v3, the much sought-after feature for absolute imports is now supported. This feature was an inspiration from the Visual Studio Code IDE, and is now available to anybody that’s using the latest version of Create React App.

What are “Absolute Imports”?

Typically, React codebases get pretty large, and the typical file structure of a project might look something like this:

├── src
│   ├── components
│   │    ├── Header
│   │    ├── Footer
│   │    ├── Sidebar
│   │    ├── ...etc
│   ├── containers
│   ├── store
│   ├── reducers
│   ├── actions
│   └── helpers
├── public
├── package.json
└── README.md

Whenever you import another <Component/> or some local module in your project, you’ll have a bunch of ./Foo, ../foo, and ../../../foo-bar import statements in your file.

import { Header } from '../Header'
import { HeaderContainer } from '../../containers/HeaderContainer'
import headerStore from '../../store/headerStore'

If you had to move this file, all of these import statements would break. “Absolute imports” in the latest create-react-app@3.0.0 release solves this problem by changing how webpack reads your import statements, so you use this syntax instead:

import { Header } from 'components/Header'
import { HeaderContainer } from 'containers/HeaderContainer'
import headerStore from 'store/headerStore'

It might look like you’re importing a npm module named “component”, but that’s not what’s happening. webpack is using your src folder as the first lookup location instead of node_modules (default).

Now when you need to move this file, your import statements won’t break! An added bonus is that it looks much cleaner, and helps people that are new to your codebase have a clearer understanding of how your project is organized.

Usage

If you’re using Create React App 3, you can switch to absolute imports by simply adding a jsconfig.json file to the root of your project (where package.json is) and instruct webpack to use src as the lookup reference. Like this:

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

That’s it! Your project will now use absolute imports in development, and production builds.

Out With the Node…

There’s an old-school way of getting this same behavior from webpack by creating an .env file at the root of your Create React App project with this environment variable:

NODE_PATH=src

However, the latest version of Create React App will give you this deprecation warning:

I’m a bit quizzical why the React team would deprecate a tool-agnostic standard like .env files. My only guess is that jsconfig.json will likely become an important config file for future releases of Create React App.

Conclusion

Are you excited about this feature? Let us know what you think on Twitter @alligatorio! I’m using this right now for my new projects, and the clean syntax is really growing on me ✨