Eslint throws is assigned a value but never used , webpack module

Question

I am importing a script in webpack, it all works but eslint is throwing the error 'modal is assigned a value but never used'. Do have to declare the const as a global or export the module to fix the error ?

modules.vanillaModal.js :

import VanillaModal from 'vanilla-modal';

// Create instance
const modal = new VanillaModal({
  modal: '.c-modal',
  modalInner: '.js-modal__inner',
  modalContent: '.js-modal__content',
  open: '[rel="js-modal:open"]',
  close: '[rel="js-modal:close"]',
  class: 'js-modal--visible',
  loadClass: 'js-modal--loaded',
});

and my webpack entry index.js:

require('./modules.vanillaModal.js');

Answer 1

This is an eslint rule http://eslint.org/docs/rules/no-unused-vars. It prevents you from creating variables that you never use, which causes code clutter or could mean you're using variables that aren't what you think they are.

If you're using a poorly designed library where the class constructor has side effects (which it isn't supposed to), and you don't need to do anything with the returned value from the class, I would disable that specific eslint rule for the create line with eslint disable comments:

// eslint-disable-next-line no-unused-vars
const modal = new VanillaModal({
  modal: '.c-modal',
  modalInner: '.js-modal__inner',
  modalContent: '.js-modal__content',
  open: '[rel="js-modal:open"]',
  close: '[rel="js-modal:close"]',
  class: 'js-modal--visible',
  loadClass: 'js-modal--loaded',
});

You can also wrap any block of code with eslint specific comments to disable a rule for that block:

/* eslint-disable no-unused-vars */
const modal = new VanillaModal({
    ...
});
/* eslint-enable no-unused-vars */

Answer 2

According to the documentation of the no-unused-vars rule, you should be able to just add an EsLint configuration comment to declare the variable as exported to be used elsewhere.

/*exported modal*/
const modal = new VanillaModal({
  modal: '.c-modal',
  modalInner: '.js-modal__inner',
  modalContent: '.js-modal__content',
  open: '[rel="js-modal:open"]',
  close: '[rel="js-modal:close"]',
  class: 'js-modal--visible',
  loadClass: 'js-modal--loaded',
});

It will work with constants too.

I find this better than disabling and re-enabling the rule again because I just need one comment instead of two.

Answer 3

Add "varsIgnorePattern:" to .eslintrc file

"no-unused-vars": ["warn", { "varsIgnorePattern": "VARIABLE_NAME"}]

https://eslint.org/docs/rules/no-unused-vars#varsignorepattern