Bundle path in react app development

[hades255]

bundle path to make components reusable and flexible to expand

[hades255]

install react-app-rewired node module

npm i react-app-rewired

yarn add react-app-rewired

[hades255]

update scripts on package.json file

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

[hades255]

make new file named config-overrides.js on the root directory

const { configPaths, alias } = require('react-app-rewire-alias')
module.exports = alias(configPaths('./jsconfig.json'))

[hades255]

make new file named jsconfig.json on the root directory

{
  "compilerOptions": {
    "paths": {
      "@icons/*": ["./src/assets/icons/*"]
    }
  },
  "include": ["src"]
}

[hades255]

use it on the components

import { BellIcon, DownVectorIcon, MarkIcon } from '@icons'