CODEWITHSUNDEEP
reactjsimporteslintflowtype
JD.
JD.

Reputation: 2487

How to import flow types without triggering eslint exceptions?

I'm unable to import flow types in my project without triggering eslint errors

project/flow-typed/auth.js:

declare module 'auth' {
  declare type TOKEN = {
    email: string,
    password: string,
    type: string,
    deviceType: string,
  };
}

file.js:

// @flow

import type { TOKEN } from 'auth';

$ eslint src:

3:1   error  'auth' should be listed in the project's dependencies. Run 'npm i -S auth' to add it  import/no-extraneous-dependencies
3:24  error  Unable to resolve path to module 'auth'                                               import/no-unresolved
3:24  error  Missing file extension for "auth"                                                     import/extensions

.eslintrc:

{
  "extends": [ "plugin:flowtype/recommended", "airbnb", "prettier", "prettier/react" ],
  "plugins": [ "flowtype", "prettier" ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2016,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "react/jsx-filename-extension": false,
    "react/prop-types": false,
    "no-console": "off"
  }
}

package.json devDependencies

  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.17.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-flowtype": "^2.45.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.6.1",
    "flow-bin": "^0.66.0",
    "prettier": "^1.10.2"
  }

flow executes without errors.

As you can see lint should be able to recognize that I'm importing a type from a module. I'm using the flowtype plugin and extending the flowtype/recommended rules.

What is going wrong, am I missing something obvious?

Upvotes: 0

Views: 698

Answers (1)

James Kraus
James Kraus

Reputation: 3478

I don't think eslint can tell that the "module" is exists at the type level. I don't think this eslint plugin was designed to recognize that you're only importing a type from a module. The much more common case is that someone imports both the module and (potentially) types from that module. You have a few options:

  • Install the auth module, no more complaints. I'm not sure why you're using a type from it without using the module, so maybe this isn't something you want/need to do.
  • Move that TOKEN type somewhere else. You're not using the auth module, so it doesn't seem like you need to stick that type in the auth module.
  • (Maybe) Write a resolver for eslint to find your typedef and stop complaining. I don't recommend this option due to the extra work and one of the above two options should cover whatever you're trying to do.

Upvotes: 1

Related Questions