Intellj IDEA eslint and alias resolving issues

I'm using a perpetual fallback license version of Intellj IDEA Ultimate for daily development but recently I noticed two issues in JavaScript development environment related to ESLint and module alias resolution. Luckily for either issue I managed to find a solution.

ESLint issue

TypeError: this.cliEngineCtor is not a constructor

The root cause to this issue was due to that a breaking change was introduced in ESLint 8.0 which causes project being developed with an older version of IDEA (older than 2021.2.2(IDEA Build 212.5284.40)) without the fix/support for ESLint 8+ not to be able to enable the ESLint plugin.

The solution/workaround is from this link by manually modifying:

{IDEA_NSTALLATION_PATH}/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugins.js

as this comment suggested. Make sure to back up the original version to avoid breaking something with for example this command:

cd {IDEA_NSTALLATION_PATH}/plugins/JavaScriptLanguage/languageService/eslint/bin
cp eslint-plugins.js eslint-plugins.js.bak

Module alias resolution issue

For alias import such as:

import SomeComponent from '@/components/SomeComponent';

When hover the component path, IDEA/WebStorm pops up a message saying Module is not installed , which indicates the IDE cannot find/resolve the component file because it does not understand the @ module alias.

Solution:

As this gist suggests, for project using WebPack, add the alias config to resolve; for project not using webpack, add a dummy config file such as:

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      '@': require('path').resolve(__dirname, 'src')
    }
  }
};

then go to Preferences | Languages & Frameworks | JavaScript | Webpack in IDEA, choose Automatically if the file is placed under the root of project, or choose Manually and specify the above config file if placed somewhere else. After this, the @ import should be able to be resolved successfully.

References

javascript