16

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?

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Ammar Alrefai
  • 278
  • 1
  • 3
  • 7
  • why not add a .babelrc to the project? – Murtaza Zaidi May 02 '18 at 10:52
  • @MurtazaZaidi it's not working, I got the following error: `Module not found: Can't resolve 'messagesComponents/Message' in '/Projects/widget/src/store/reducers'` – Ammar Alrefai May 02 '18 at 11:25
  • Does this answer your question? [How to avoid using relative path imports (/../../../redux/action/action1) in create-react-app](https://stackoverflow.com/questions/45213279/how-to-avoid-using-relative-path-imports-redux-action-action1-in-cre) – Emile Bergeron Jan 08 '21 at 14:37
  • https://stackoverflow.com/questions/57032522/eslint-complains-about-typescripts-path-aliasing – saisriram manchella May 07 '21 at 09:12

3 Answers3

14

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'
  }
},
...
callmeroot
  • 552
  • 4
  • 15
6

UPDATED:

I recommend you to use Craco.

It allows you to customize webpack / babel / any other tool that used in react-scripts internally.

Webpack and Jest aliases is not an exception.

And recently I created a plugin called craco-alias specially for these purposes.

Links: GitHub, npm.

This plugin generates webpack and jest aliases for you automatically.

You just need to install Craco, write a small config for it, then create (or edit) your jsconfig.json / tsconfig.json (it works with TS as well) and specify aliases source in craco-alias config object.

It's easy - you can find all examples on README page.

Of course it works with every command (npm start, npm test, run build build) and allows to pass any CLI arguments.

But, the only problem is that plugin only supports path aliasing, and it doesn't work with module aliases properly.

I hope it will help somebody :)

risen
  • 61
  • 2
  • 4
3

The alias solution for craco or rewired create-react-app is react-app-alias for systems as: craco, react-app-rewired, customize-cra

According docs of mentioned systems replace react-scripts with craco in package.json and configure next:

// craco.config.js
const {CracoAliasPlugin} = require('react-app-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {}
    }
  ]
}

Configure aliases in json like this:

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "example/*": ["example/src/*"],
      "@library/*": ["library/src/*"]
    }
  }
}

And add this file in extends section of main typescript config file:

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  // ...
}
oklas
  • 7,935
  • 2
  • 26
  • 42