Tutorial
Super Clean, Refactor-Friendly Import Statements in React
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using 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.
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:
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
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 ✨