ESLint config in a lerna subpackage is not loaded correctly

We currently have a problem with the eslint extension in combination with a lerna setup and multiple configuration files. The described issue occurs in a commercial project for a big company with closed source, so we can not add logs or traces to this issue - but we’ll describe the error case as good as possible.

The Problem

ESLint in the VSCode (IDE only) will show errors for the import/resolver section inside the subpackage for the main application and it looks like that the ESLint extension is not reading the overwritten configuration file from the subpackage and is using the root .eslintrc.js.

Error case e.g. /packages/apps/main-app/src/ComponentXY.js

import OtherComponent from 'src/OtherComponent';
// => ESLint: unable to resolve path to 'src/OtherComponent'. (import/no-unresolved)

If we run the DEBUG=eslint-plugin-import:* ./node_modules/.bin/eslint --fix command on the project level we’ll receive all errors displayed in the IDE that ESLint is not able to resolve the references to the components with absolute path. But if we run the exact same command inside our subpackage (/packages/apps/main-app/) we don’t get any error about resolving modules.

So we assume that this is an issue with the VSCode ESLint extension because this behaviour only appears inside the IDE.

As temporary solution we switched our whole team to Atom because there is no issue with the ESLint integration. We’re looking forward to get a solution for this weird behaviour.

Project information

The project uses the lerna structure with the folder packages, in this folder we have a wrapper folder for all apps of our customer called apps. Inside the apps we have main-app project and an additional .eslintrc.js configuration which will add the capability to resolve modules without the relative paths (e.g. src/Component instead of ../src/Component).

Our project structure

project/ (lerna root)
  + configs/
  |       + eslint-config/
  |             + node.js
  |
  + packages/
  |       + apps/ (lerna package)
  |        |    + main-app (lerna subpackage)
  |        |     |       + src/
  |        |     |       |    + Component.js
  |        |     |       | 
  |        |     |       + .eslintrc.js (app config)
  |        |     |       + package.json
  |        |
  |       + common/
  |
  + .eslintrc.js (root config, will use configs/eslint-config/node.js)
  + package.json

configs/eslint-config/node.js (root .eslintrc.js)

module.exports = {
	extends: [
		'@namics/eslint-config/configurations/es6-node.js',
		'@namics/eslint-config/configurations/es6-node-disable-styles.js',
	].map(require.resolve),
	globals: {
		__dirname: true,
	},
};

packages/apps/main-app/.eslintrc.js

const config = require('@configs/eslint-config/index');

module.exports = Object.assign(config, {
	settings: {
		'import/resolver': {
			node: {
				paths: ['src'],
			},
		},
	},
});

lerna.json

{
    "lerna": "2.0.0",
    "version": "independent",
    "packages": ["configs/*", "packages/*/*"]
}

General information

• OS: MacOS High Sierra 10.13.2
• Node: 6.12.3
• Lerna: 2.0.0
• VSCode: 1.22.2 (1.22.2)
  • ESLint Plugin: 1.4.8

[dbaeumer]

Using the following setting

	"eslint.workingDirectories": [
		{
			"directory": "packages/apps/main-app",
			"changeProcessCWD": true
		}
	]

Makes eslint work.

I will add something to the doc about changeProcessCWD which is indeed missing. I added that especially to resolve relative imports.

[janbiasi]

Hey @dbaeumer, example project is ready under janbiasi/vscode-eslint-issue-455, hit me up if you need more information.