[JavaScript] Avoid using aliases (such as webpack alias) in favor of relative imports

[nicholasio]

Is your enhancement related to a problem? Please describe. Webpack aliases (and similar features in other bundles) often cause more harm than good.

With alias we can convert imports like this:

import MyComponent from './components/MyComponent';

into something like this

import MyComponent from '@components/MyComponent';

The benefit is that you simplify importing files from deeply nested folders:

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

However, there are a couple of issues:

• It's not a JS standard
• It is not immediately clear (especially for new engineers) where the file is located, i.e, they would have to know the aliases first.
• The aliases must be set up on every tool used in a project (eslint, ts, jest, storybooks etc).
• IDE and editors won't recognize the aliases (at least by default)

Describe the solution you'd like Discourage usage of webpack aliases and similar 10up across projects at 10up.

Additional context Many projects inside and outside at 10up have experimented using webpack aliases and eventually decided to stop using them.

[jeffpaul]

@nicholasio is this something you'd want to get into a PR or is there someone else you'd like to see pick this up to work on?

[RuhaniMakhija]

Hello I would like to work on this issue