Adding Alias to create-react-app

programming jekyll javascript react

We’ll make this quick.

So you’ve got a Javascript project you bootstrapped with create-react-app, and you’re at the point where ../../../components/myComponent is getting tedious. While we can’t use plugins like babel-plugin-module-resolver to add aliases to our project, we can use a jsconfig.json file placed at the root of our directory to get a similar effect. We add a baseUrl option that create-react-app respects thanks to a change made in April of 2019.

Assuming you’re project source lives in the src directory at the root of your project, add this jsconfig.json right next to it.

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

So now your project root directory might look something like this.

.
├── Makefile
├── README.md
├── jsconfig.json
├── node_modules
├── package.json
├── public
├── src
└── yarn.lock

That’s the setup! Now you can import from your files without worrying about how many levels up or down you need to traverse the project to find your file!

import { MyComponent } from 'components/myComponent';

Happy days! 🎉

Check out our other posts