Skip to content
Advertisement

How to make an import shortcut/alias in create-react-app?

a b

How to set import shortcuts/aliases in create-react-app? From this:

import { Layout } from '../../Components/Layout'

to this:

import { Layout } from '@Components/Layout'

I have a webpack 4.42.0 version. I don’t have a webpack.config.js file in the root directory. I’ve tried to create one myself with this code inside:

const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    }
  }
};

But it doesn’t seem to work. I’ve seen the NODE_PATH=. variant in .env file. But I believe, it is deprecated – better not to use. And also, I have a posstcss.config.js file. Because I’ve installed the TailwindCss and I import the CSS library there. I’ve tried to paste the same code there, but it also didn’t work.

Advertisement

Answer

// Absolute path: paths which are relative to a specific path
import Input from 'components' // src/components
import UsersUtils from 'page/users/utils' // src/page/users/utils

// Alias path: other naming to specific path
import Input from '@components' // src/components
import UsersUtils from '@userUtils' // src/page/users/utils

In order for webpack’s aliases to work, you need to configure the default webpack.config.js of create-react-app.

The official way is to use the eject script. But the recommended way is to use a library without ejecting (find the most modern library for that).

VSCode IntelliSense

In addition, you should add jsconfig.json file for path IntelliSense in VSCode (or tsconfig.json), see followup question.

Now such code with IntelliSense will work:

// NOTE THAT THOSE ARE ALIASES, NOT ABSOLUTE PATHS
// AutoComplete and redirection works
import {ColorBox} from '@atoms';
import {RECOIL_STATE} from '@state';
Advertisement