Absolute imports with Create React App

Plus ESLint and WebStorm config

With the release of Create React App 3, we now have the ability to use absolute import paths, without ejecting.

Hallelujah.

If you’re reading this you probably don’t need me to tell you why this is a good thing. I’m going to anyway, though.

• It’s easier to type out the paths, no more ../../../hell.
• You can copy/paste code including imports into other files and not have to fiddle with the import paths.
• You can move a file without having to update its input paths (if you IDE doesn’t do that for you anyway).
• It’s neat.

That’s an absolute path

As explained in the docs, you start by creating a jsconfig.json file in your root with these characters and symbols in it:

That’s great, now you can take something like this:

And make those imports prettier.

Unfortunately, this is where the docs stop. But you might not be done just yet.

WebStorm config

If you’re a WebStorm/IntelliJ user, you’re going to hear some complaints:

WebStorm assumes absolute paths are in node_modules (as per the Node.js rules), so we must tell it that we’re being fancy and using absolute imports.

First up, mark the src directory as a Resources Root.