How to ban imports with ESLint

22nd July 2022

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 brevity
rules: {
"no-restricted-imports": [
paths: [
name: "@chakra-ui/react",
importNames: [
"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
Bart Stefański

A self-taught full-stack software engineer based in Poland, working in React.js & Nest.js Stack. Passionate about Clean Code, Object-Oriented Architecture and fast web.