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.
// 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).
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';