Super Clean, Refactor-Friendly Import Statements in React

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:

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.

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 ✨