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 '../../../../ponents/MyComponent'

Expected

import MyComponent from 'ponents/MyComponent'

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 '../../../../ponents/MyComponent'

Expected

import MyComponent from 'ponents/MyComponent'

• javascript
• reactjs
• create-react-app
• absolute-path

1 Answer 1

In your main root, create file jsconfig.json:

{
   "pilerOptions": {
      "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 ponents with an absolute path:

import MyComponent from 'ponents/MyComponent';