⛔ How to ban imports with ESLint
Sometimes you don't want to use some modules from a library or other part of your code. Or you want to prevent your colleagues from using them. This post gives you a ready-to-use solution for banning imports with ESLint.
10 months ago
Sometimes you don't want to use some modules from a library or other part of your code.
Maybe you're using a third-party dependency that contains modules with poor performance, bugs, or doesn't tree-shake them correctly. Maybe you want to create a modular architecture with ESLint config per module and ban imports from other modules.
No matter the use case, the goal is the same - you want to prevent your colleagues (or your future self) from using it.
For such and other cases, you can use the no-restricted-imports rule in ESLint. In the example given below, I banned the performance-heavy modules in the Chakra-UI library. If someone tries to use it, it will throw an error.
module.exports = {// ... removed for brevityrules: {"no-restricted-imports": ["error",{paths: [{name: "@chakra-ui/react",importNames: ["Modal","Checkbox","Drawer","Collapse","Fade","ScaleFade","SlideFace","Slide","Transition","Menu","Accordion","Toast","Tooltip","Popover","PopoverTransition",],message:"These imports are banned due to their dependence on framer-motion which bloats our bundle size. Please use our own implementation of that component. ",},],},],// ... removed for brevity},};
Similar blog posts
✨ Auto-fixable import sorting rules for ESLint
(3 min read)
👨⚖️ How to assign ref in forwardRef component
(4 min read)
