Bart Stefanski
Published on

⛔ How to ban imports with ESLint


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