React import root path helper

Question

In react because I have to import varies helper or component I have this problem

import approxPerDay from '../../../utils/approxPerDay.js'
import otherstuff from '../components/otherstuff'

and in another file it might be import approxPerDay from '../utils/approxPerDay.js'

It's really hard and time consuming to find is the relative path is. Is there any npm or helper can solve this issue?

user_2955099 · Answer

I was experiencing a similar problem. I finally resolved it by following this article: https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

Create a .env file in the root of the react app
Add a line NODE_PATH = src/

That worked for me.

user_13376958 · Answer

The thing you are asking is called "absolute import". "create react app" already provides a standard solution and recommends creating a jsconfig.json file in your root directory of react project.

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

Later you can import components as such:

import Button from 'components/Button';

Go to this link of official docs related to importing component and there u will find absolute import section:

https://create-react-app.dev/docs/importing-a-component/

And Yes don't forget to restart your react server after doing the changes : )

user_4329812 · Answer

If you need to specify the .env file and relative path, the IDE needs to know about it. For this, the following lines worked for on my IDE.

File jsconfig.json

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

React import root path helper

4 Answers