Super Clean, Refactor-Friendly Import Statements in React

Published on May 2, 2019
Default avatar

By William Le

Super Clean, Refactor-Friendly Import Statements in React

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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.


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:


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

Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.

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.

Read more about absolute imports in the create-react-app release notes


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 ✨

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors
Default avatar
William Le


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel