How to avoid very long paths and use absolute paths within a Create React App project?

Question

Is there a babel plugin to avoid long import path in CRA? I've searching a lot on the web but I can't find the best way to achieve this.

Actual:

import MyComponent from '../../../../components/MyComponent'

Expected

import MyComponent from 'components/MyComponent'

Answer 1

In your main root, create file jsconfig.json:

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

Where src is the folder where you store your project files, sometimes it may be /app or /src.

Then you will be able to import your components with an absolute path:

import MyComponent from 'components/MyComponent';