1 Simple Step Absolute Imports for React

Swap relative for absolute file paths in your React components with a jsconfig - no extra packages or complex javascript required!

Absolute Imports in React

Just take me to the implementation

Last time, we talked about using the barrel export pattern to clean up and simplify our React imports. We can level up out importing even more though with absolute file path imports.

Anyone who's written a few React components will recognize this:

import Panel from "./Panel"

That's a relative import, or more specifically an import that uses a relative file path. The ./ at the start of the path signals to our bundler to start looking for Panel in the same directory relative to the current file. We can also tell the bundler to look in higher directories using ../ to go up a level, ../../ for two levels, and so on. Super convenient.

Now someone who's written hundreds of React components might also know that to maintain good file organization, it means a lot of layers and imports that look like this:

import Panel from "../../../../components/Layout/Panel"

That works fine for Webpack, but we should be more concerned about the humans who need to read our code than the machines. And at that point, it's getting hard to figure out where all those components are coming from. Add in remembering what layer everything lives in relative to 'here' when adding imports? It's not great.

But what if we could do this?

import Panel from "src/components/Layout/Panel"

Pretty neat! Now anyone coming into our code knows where to find Panel and when we need something new, we can always start from src and find it pretty easily. No more counting folders up the file tree!

How to Get Absolute Imports in React

Usually changing anything with Webpack is a complex nightmare. But this isn't! Setting up absolute imports is almost stupidly easy. All we need is to create a jsconfig.json in our project root and paste this in:

{
  "compilerOptions": {
    "baseUrl": "."
  },
  "include": ["src/**/*"]
}

That's it. Yes, seriously. Add the file, start up the app, start changing some imports and be amazed that it doesn't crash.

There is one more step we can take though, and that's to drop the src/ from the absolute paths too but making that the baseUrl.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src/**/*"]
}

Now, with the power of absolute paths and barrel exports we can go from this:

import SegmentedControl from "../../components/Layout/segmentedControl"
import ChannelProfileCard from "../../components/Layout/entities"
import CommunityAvatar from "../../components/Layout/avatar"
import MembersList from "./components/MembersList"
import PostFeed from "./components/PostsFeed"
import Errors from "../../data/errors"
import FullScreenRedirectView from "../../views/viewHelpers/fullScreenRedirect"
import AppSelection from "../../views/AppSelection"

To this!

import {
  ChannelProfileCard,
  CommunityAvatar,
  MembersList,
  PostFeed,
  SegmentedControl,
} from "components"
import { Errors } from "data"
import { AppSelection, FullScreenRedirectView } from "views"

It's so beautiful

What's Next

Now that our imports are all chef kiss, we'll start looking at component patterns for better organization and composability (that will help out imports even more too). Follow me here on Hashnode and on Twitter @justmyrealname so you don't miss out on any cool React stuff

 
Share this