Eslint doesnt know about $ReadOnly utility type

[smdern]

$ReadOnly was added in flow 0.59

https://github.com/facebook/flow/blob/master/Changelog.md#0590

[gajus]

PR welcome.

[lll000111]

I don't get an error. Demo code — both Flow and eslint report no errors:

// @flow
'use strict';

type MyObj = {| foo: number |};

/**
 * @param obj
 */
function demo (obj: $ReadOnly<MyObj>): void {

}

demo({foo: 42});

[mattdarveniza]

I also get an eslint no-undef violation when any flow utility type is used. I don't see any reference to these global utility types anywhere in the repository, so I'm a little confused as to how eslint wouldn't raise a no-undef violation for those that can't reproduce.

The above code produces the following error output for me:

error  '$ReadOnly' is not defined                    no-undef

The referenced PR would resolve this.

[n1ru4l]

I can confirm this issue by using the following versions

    "eslint-plugin-flowtype": "2.46.1",
    "eslint-plugin-jest": "21.15.0",
    "eslint-plugin-prettier": "2.6.0",
    "babel-core": "6.26.0",
    "babel-eslint": "8.2.2",
    "babel-plugin-macros": "2.2.0",
    "babel-plugin-transform-export-extensions": "6.22.0",
    "babel-plugin-transform-flow-strip-types": "6.22.0",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-preset-env": "1.6.1",

.eslintrc.js

`use strict`

module.exports = {
  root: true,
  plugins: [`prettier`, `jest`, `flowtype`],
  parser: `babel-eslint`,
  parserOptions: {
    ecmaVersion: 8,
    sourceType: `module`,
    ecmaFeatures: {
      jsx: true,
      experimentalObjectRestSpread: true,
    },
  },
  env: {
    node: true,
    es6: true,
  },
  extends: [`eslint:recommended`, `plugin:jest/recommended`],
  rules: {
    'prefer-const': [`error`],
    'no-var': [`error`],
  },
  overrides: [
    {
      files: ['src/**/__tests__/**/*.js'],
      env: {
        'jest/globals': true,
      },
    },
  ],
}

.babelrc

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "node": "8.10"
        },
        "modules": "commonjs"
      }
    ]
  ],
  "plugins": [
    "transform-object-rest-spread",
    "macros",
    "preval",
    [
      "transform-runtime",
      {
        "helpers": true,
        "polyfill": false,
        "regenerator": false,
        "moduleName": "babel-runtime"
      }
    ],
    "transform-export-extensions",
    "transform-flow-strip-types"
  ]
}

Code Sample

export type Context = {
  getViewer: () => Promise<any>,
  repositories: any,
  connectors: any,
  env: any,
  isFeatureEnabled: (flag: 'foo' | 'ay') => boolean,
}

export type UnauthenticatedContext = {
  ...$Exact<Context>,
  viewer: null,
}

Error:

[eslint] '$Exact' is not defined. (no-undef)````

**Solution:**

Using the PR e.g. adding the flow-utility types as Globals.

[lll000111]

@n1ru4l Using your code sample I get an error unrelated to the issue being discussed here:

TypeError: Cannot read property 'type' of undefined

TypeError: Cannot read property 'type' of undefined
    at /usr/local/lib/node_modules/eslint-plugin-flowtype/dist/rules/noDupeKeys.js:76:32
    at arrayEach (/usr/local/lib/node_modules/eslint-plugin-flowtype/node_modules/lodash/lodash.js:508:11)
    at Function.forEach (/usr/local/lib/node_modules/eslint-plugin-flowtype/node_modules/lodash/lodash.js:9334:14)
    at checkForDuplicates (/usr/local/lib/node_modules/eslint-plugin-flowtype/dist/rules/noDupeKeys.js:73:22)
    at listeners.(anonymous function).forEach.listener (/usr/local/lib/node_modules/eslint/lib/util/safe-emitter.js:47:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/usr/local/lib/node_modules/eslint/lib/util/safe-emitter.js:47:38)
    at NodeEventGenerator.applySelector (/usr/local/lib/node_modules/eslint/lib/util/node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (/usr/local/lib/node_modules/eslint/lib/util/node-event-generator.js:280:22)
    at NodeEventGenerator.enterNode (/usr/local/lib/node_modules/eslint/lib/util/node-event-generator.js:294:14)
Process finished with exit code -1

using this eslint configuration: https://gist.github.com/lll000111/1819c5c900e3d5825031e45a5eeb53cb

This seems to be a known issue with a fix in this PR: #266

But I use a few utility types in my project and don't get any errors from any of them.

[mattdarveniza]

Okay I think I've found the source of my troubles. Turns out react-scripts requires an older version of eslint-plugin-flowtype (2.39.1 specifically) where this is an issue. Even with a newer version of eslint-plugin-flowtype installed at the top level, CRA apps seem to force this older version with this issue.

Need to do some poking around but this is likely something that needs to be raised as an issue with create-react-app, rather than here.

@n1ru4l was your case also inside a CRA app?

[n1ru4l]

@mattdarveniza I am using an ejected react-native app, no dependencies upon react-scripts.

[mattdarveniza]

Hmm yeah my problem turned out to be a silly one of editing the wrong eslintrc file anyway. With eslint-plugin-flowtype version 2.46.1 installed and "plugin:flowtype/recommended" in my eslintrc, it works correctly for me now.