How to add import shortcuts - alias

Question

I've created a brand new react app

create-react-app demo 

I need to create alias for some directories/components like:

import { Header } from '@uicomponents' 

Where @uicomponents is shortcut for the path 'src/hello/this/is/the/path/to/ui/components '

All online tutorials telling that I can use alias imports using resolve.alias, but I'm wondering how to do this with brand-new react app?

Theres is no .babelrc or webpack.config.js files.

Any help please?

Answer 1

If you haven't ejected your application from CRA, then you can alias your source directory with using NODE_PATH in your .env file. NODE_PATH=/src/hello/this/is/the/path/to/ui/components.

If you alias without ejecting, it won't allow you to do the @uicomponents or have multiple aliases. Here's an issue on GitHub that talks about it and the relevant CRA page on environment variables.

If you have ejected you can set the alias in the Webpack configuration files and be able to import like you want:

...
resolve: {
  alias: {
    '@uicomponents': '/src/hello/this/is/the/path/to/ui/components'
  }
},
...