// Tutorial //

Super Clean, Refactor-Friendly Import Statements in React

Published on May 2, 2019
Default avatar
By William Le
Developer and author at DigitalOcean.
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 ✨

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

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!