Disallow specific imports in Javascript Project

Have you been in scenario where team members are using different libraries to perform identical functionalities and resulting in a large JS bundle?

Well, recently our team faced the same scenario. We started a new project related to the Ethereum block chain. To interact with the Ethereum Block Chain and its ecosystem there are couple of libraries available in market from which ethers.js and web3js are widely used. In our project we decided to use the former one.

After the couple of days an inter joins us. We gave her a small task to start with,
 so at the end of the day, she imported the web3.js performed the task and committed the changes !!!. 


So here we have unnecessary import in project that will bloat our JS bundle o
r there might  some scenario in which we may want to restrict import of a sub module or part of a large module.

Well in such case ESLint 's no-restricted-imports rule can rescue us.


Below is simple example of using no-restricted-import by defining the array to disallowed imports
 

 {  
  "rules": {  
   "no-restricted-imports": ["error", "web3", "Some Other Module"]  
  }  
 }  

Or you can define the object with path key containing array of restricted imports

 {  
  "rules": {  
   "no-restricted-imports": ["error", { path : ["web3", "Some Other Module"] }]  
  }  
 }  

We can also specify a custom message for any paths you want to restrict as follows:

 {  
  "rules": {  
   "no-restricted-imports": ["error", {  
    "paths": [{  
     "name": "web3",  
     "message": "Use ether.js instead!"  
    }]  
   }]  
  }  
 }  

Or alternatively

 {  
  "rules": {  
   "no-restricted-imports": ["error", {  
    "name": "web3",  
    "message": "Use ether.js instead!",  
   }],  
  }  
 }  

This would error and display our custom message if someone tried to:

 import moment from 'web3';  

no-restricted-imports supports an array of .gitignore-style patterns when using the object form. Here, if someone attempts to import modules matching the moduleXYZ/* pattern, for example import helpers from 'moduleXYZ/helpers' it will produce the error !

 {  
  "rules": {  
   "no-restricted-imports": ["error", {  
     "patterns": ["moduleXYZ/*"]  
   }],  
  }  
 }  

Be careful !

Don’t use this rule or don’t include a module in the list for this rule if you want to be able to import a module in your project without an ESLint error or warning.


Conclusion :

You want to use this rules to restrict some imports in case of :

  • Some imports might not make sense in a particular environment. For example, Node.js’ fs module would not make sense in an environment that didn’t have a file system. 
  •  Some modules provide similar or identical functionality and you want to make sure that the other alternatives are not being used as this would unnecessarily bloat the project and provide a higher maintenance cost of two dependencies when one would suffice.
But ...
  • Be careful while restricting modules otherwise it will result in ESLint error

Comments

Popular posts from this blog

JS Tip - Required function parameters

JS Tip - Use variable parameters for setTimeout()