Creating Alias’ For Package Imports in React

Dave Berning
Dec 29, 2017 · 2 min read

The more I work in React, the more I love it. It’s a very mature framework that is immensely popular. While working with the Vue CLI, there was one thing that I really liked; default alias for the src directory. Having an alias for a commonly referenced directory eliminates fragile relative paths, produces cleaner code, and is much easier to read. Let’s dive in.

Importing Packages Without An Alias

Let’s see how messy importing code without an alias is. Let’s imagine that our component (SomeComponent.jsx) is nested deep within our directory structure. I want to be able to access anotherComponent.jsx that is a few levels up…

import React, { Component } from 'react';
import AnotherComponent from './../../../../../components/anotherComponent/AnotherComponent';
import ProfileImage from './../../../../../../assets/profile.jpg';

class SomeComponent extends Component {
render() {
return (
<div>
<img src={ProfileImage} alt="My profile image!" />
<AnotherComponent />
</div>
);
}
}

export default SomeComponent;

As you can see, the relative paths are ugly. But they’re also fragile. What if you update your directory structure? Physically moving a component up a level with all it’s dependencies, will break and ka-boom. Failed to compile…

Importing Packages With An Alias

Let’s look at packages with an alias. This is the end goal.

import React, { Component } from 'react';
import AnotherComponent from '@/components/anotherComponent/AnotherComponent';
import ProfileImage from '@/assets/profile.jpg';

class SomeComponent extends Component {
render() {
return (
<div>
<img src={ProfileImage} alt="My profile image!" />
<AnotherComponent />
</div>
);
}
}

export default SomeComponent;

See, isn’t that a lot better? Our code is cleaner and since we are using absolute paths, our code isn’t as fragile!

That’s Awesome But How Do I Do That?

First, I am assuming that you are using create-react-app, React’s CLI. Second, you will need to open up your config/webpack.config.dev.js file.

Once opened…

  1. Run: npm run eject
  2. Find the ‘alias’ object in your dev config file
  3. Add the following code…
  4. ’@’: path.resolve(‘src’)

Your alias object should look something like this…

alias: { '@': path.resolve('src'), 'react-native': 'react-native-web' }

I also like to add alias’ to some commonly used node_modules as well. For my projects, I usually create an alias for Bulma, the Flexbox CSS framework. Note: your alias doesn’t have to start with or a ‘@’; it be can anything you want.

'bulma': path.resolve('node_modules/bulma/css/bulma.css')

So, in my components, I can just import it like any other package, stylesheet, image, or component.

import Bulma from 'bulma';

If this helped you at all, please share and follow me on Twitter!

Originally published at daveberning.io on December 29, 2017.

Dave Berning

Written by

Software Engineer from Cincinnati. I work on JavaScript apps with Vue.js. Writer for Digital Ocean, Front End Weekly, and organizer of the #CodePenCIN meetup.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Dave Berning

Written by

Software Engineer from Cincinnati. I work on JavaScript apps with Vue.js. Writer for Digital Ocean, Front End Weekly, and organizer of the #CodePenCIN meetup.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store