Eslint-plugin-jsx-a11y: Flow: identifier `ESLintContext`. Could not resolve name

[leethree]

Using Flow 0.42.0 and eslint-plugin-jsx-a11y 5.0.1.

Got the following error when running Flow check on my project:

$ flow check 

node_modules/eslint-plugin-jsx-a11y/src/rules/interactive-supports-focus.js:46
 46:   create: (context: ESLintContext) => ({
                         ^^^^^^^^^^^^^ identifier `ESLintContext`. Could not resolve name

node_modules/eslint-plugin-jsx-a11y/src/rules/media-has-caption.js:43
 43:   create: (context: ESLintContext) => ({
                         ^^^^^^^^^^^^^ identifier `ESLintContext`. Could not resolve name

node_modules/eslint-plugin-jsx-a11y/src/rules/no-interactive-element-to-noninteractive-role.js:47
 47:   create: (context: ESLintContext) => {
                         ^^^^^^^^^^^^^ identifier `ESLintContext`. Could not resolve name

node_modules/eslint-plugin-jsx-a11y/src/rules/no-interactive-element-to-noninteractive-role.js:51
 51:         attribute: ESLintJSXAttribute,
                        ^^^^^^^^^^^^^^^^^^ identifier `ESLintJSXAttribute`. Could not resolve name

node_modules/eslint-plugin-jsx-a11y/src/rules/no-noninteractive-element-interactions.js:46
 46:   create: (context: ESLintContext) => {
                         ^^^^^^^^^^^^^ identifier `ESLintContext`. Could not resolve name

node_modules/eslint-plugin-jsx-a11y/src/rules/no-noninteractive-element-to-interactive-role.js:47
 47:   create: (context: ESLintContext) => {
                         ^^^^^^^^^^^^^ identifier `ESLintContext`. Could not resolve name

node_modules/eslint-plugin-jsx-a11y/src/rules/no-noninteractive-element-to-interactive-role.js:51
 51:         attribute: ESLintJSXAttribute,
                        ^^^^^^^^^^^^^^^^^^ identifier `ESLintJSXAttribute`. Could not resolve name

node_modules/eslint-plugin-jsx-a11y/src/rules/no-noninteractive-tabindex.js:45
 45:   create: (context: ESLintContext) => {
                         ^^^^^^^^^^^^^ identifier `ESLintContext`. Could not resolve name

node_modules/eslint-plugin-jsx-a11y/src/rules/no-noninteractive-tabindex.js:49
 49:           node: JSXOpeningElement,
                     ^^^^^^^^^^^^^^^^^ identifier `JSXOpeningElement`. Could not resolve name

node_modules/eslint-plugin-jsx-a11y/src/rules/no-static-element-interactions.js:47
 47:   create: (context: ESLintContext) => {
                         ^^^^^^^^^^^^^ identifier `ESLintContext`. Could not resolve name


Found 10 errors
error Command failed with exit code 2.

Looks like src/ folder should be excluded from the module.

[ljharb]

Why would you have flow configured to run checks on things inside node_modules?

src/ absolutely should not be excluded from the module; it's important to be able to inspect the original source for an installed package, especially when offline.

[leethree]

There are a lot of modules from npm which contain useful Flow types. So I don't think it's safe to say node_modules should be ignored by Flow. There's a discussion thread: https://github.com/facebook/flow/issues/869. Apparently there's no consensus on how to best solve flow errors in npm packages.

Meanwhile, I added an ignore rule to .flowconfig as a workaround.

[ignore]
.*/node_modules/eslint-plugin-jsx-a11y/src/.*

[ljharb]

Sounds like it's a Flow issue; since even when typing node_modules Flow shouldn't be typing things that you're not importing.

[leos]

Sorry, but shouldn't the type imports referenced in these errors explicitly be in those files regardless? Some of the rule files have them and the erroring ones don't.

[ljharb]

Perhaps, but wouldn't the flow checks fail if that was required?

If tests on master can be made to fail this way, a PR to fix them would be great.

[leos]

The errors are being masked by the libs setting in .flowconfig. Removing that line causes the errors to pop up on master.

Up to you guys if you want to make those imports explicit (I would lean in that direction). If so, happy to do a quick PR.

[ljharb]

As a matter of hygiene, perhaps - a PR would let other collabs weigh in on it better. However, it wouldn't be for the purpose of fixing this issue, since this is due to a bug in Flow itself.

[iainbeeston]

Sorry guys but I'm still seeing exactly the same errors with 5.0.3 (and flow 0.42.0). @leethree did upgrading to 5.0.2 fix the issue for you?

[leos]

@iainbeeston - you're seeing those exact errors? That seems really unlikely since they're now explicitly imported in 5.0.3.

Can you double check that you're using 5.0.3? If you look at one of the files directly, does it have an explicit import for those identifiers? I just tried with Flow 0.42 and my project came out clean.

[iainbeeston]

@leos I've double checked ./node_modules and it definitely is 5.0.3.

I have been able to reproduce in a fresh app and I've uploaded it to github:

https://github.com/iainbeeston/eslint-plugin-jsx-a11y-241

I've also set up a circleci build that runs flow and gets the same errors.

[leos]

@iainbeeston The error message isn't the same.

The error is not in node_modules but rather in node_modules/react-scripts/node_modules/eslint-plugin-jsx-a11y/. Please ask react-scripts to update to 5.0.3.

[iainbeeston]

Ah! Sorry, my bad, thanks for pointing that out. I had wondered why @leethree 's fix works if it begins with .*/node_modules but not if I change it to ./node_modules

I'll raise a PR with react-scripts