Switching to absolute imports in React Create App (Typescript and Javascript)

I switched working to a new React project where all of the import paths are relative to the location of the current file. This means that it is quite common to have to navigate in folders ending up with funny imports like:

import {SigninButton} from '../../../../../buttons/SigninButton'

Would like to have a simple absolute import path, where everything starts from the top default level:

import {SigninButton} from 'src/buttons/SigninButton'

It seems that this is quite easy to make this in the create react app utility. What we need to do is to create a jsconfig.json file in the root of the project with the following content:

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

In case you are using TypeScript, you will already have a tsconfig.json file at the root of your project. You will just have to add the baseUrl setting in compilerOptions:

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

And this is pretty much it. Now we can add components with the same import statement without having to wonder how deep in the folder structure we are in.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X