How to use absolute imports with React

Starting from React scripts you can now use absolute imports to use your components.

What’s the problem?

Imagine you have the following simple code structure.

/src
 --/Components
   --/Home/Top.js
   --/A/Really/Deep/Component.js
   --App.js

If you wanted to import, say… Top into App, you would normally do:

App.js

import Top from './Home/Top'

So what’s the problem?

Imagine you want to import Top into Component, then you would have:

import Top from '../../../../Home/Top'

Did you count the folders I went back? I didn’t so it might not match.

Now imagine a more complex code or any refactor that involves moving the file.

It would be easier if you could only absolute import it like: import Top from Components/Top

If you use bare webpack you could manually specify it. And luckily create-react-app and react-scripts now support this feature.

Adding absolute imports support

There are two ways to make this work.

Method1: Using env file

If you can create/edit a .env file in your projects root folder add the following:

NODE_PATH=src/

Method2: Using jsconfig

Create jsconfig.json on your projects root folder. And add the following:

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": "src/"
  }
}

Your file can have many more options, you can find more in the documentation site

If you have both methods together, the webpack compiler might rise a warning, so be careful to only use one of them.

Now when you run yarn start or npm run start you should be able to run your code using absolute imports.

References