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'

Emile Bergeron · Accepted Answer · 2019-12-02 21:42:29Z

12

{
   "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';

Emile Bergeron

17.5k5 gold badges85 silver badges133 bronze badges

answered Dec 2, 2019 at 21:38

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

I added a link to the documentation in your answer, feel free to improve/change my edit ;)

@kinduser Thank you. I've missing the absolute path search term :) This method don't need to configure babel or anymore; Awesome.