Import typescript file in FlowJS (eslit: Flow: Cannot resolve module)

柔情痞子 提交于 2021-01-29 14:29:44

问题


I trying incrementaly migration from Flow to Typescript. I use webpack with babel for transpile flow and typescript. ('@babel/preset-flow', '@babel/typescript')

I have this import in FLOW file test.js

/* @flow */

import MyComponent from 'components/myComponent'

on path: src/components/myComponent/index.tsx is

class MyComponent extends Component<Props> {
    render() {}
}
export default MyComponent

My WebStorm IDE display eslint error Flow: Cannot resolve module components/myComponent For resolve this issue I tryied use "eslint-import-resolver-typescript"

My .eslintrc

{
  "parser": "babel-eslint",
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
        "plugin:import/typescript",
        "plugin:cypress/recommended",
        "plugin:@typescript-eslint/recommended"
  ],
  "globals": {
    "API_HOST": true,
    "Raven": true
  },
  "plugins": [
    "import",
    "flowtype",
    "react",
    "prettier",
    "json",
    "emotion",
        "cypress",
        "@typescript-eslint"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jquery": true,
    "mocha": true,
    "jest": true,
    "jasmine": true,
        "cypress/globals": true
  },
  "rules": {
    "comma-dangle": ["error", "always-multiline"],
        "import/no-unresolved": 0,
    "import/extensions": [0, "never", { "svg": "always", "css": "always", "png": "always", "ts": "never"}],
    "import/no-named-as-default-member": 0,
    "quotes": [1, "single"],
    "no-console": 1,
    "no-debugger": 1,
    "no-var": 1,
    "semi": [
      "error",
      "never"
    ],
    "no-trailing-spaces": 1,
    "no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
    "no-prototype-builtins": 0,
    "require-atomic-updates": 0,
    "eol-last": 0,
    "no-unused-vars": [1, {"ignoreRestSiblings": true}],
    "no-underscore-dangle": 0,
    "no-alert": 0,
    "no-lone-blocks": 0,
    "jsx-quotes": 1,
    "react/display-name": [
      1,
      {
        "ignoreTranspilerName": false
      }
    ],
    "react/forbid-prop-types": [
      1,
      {
        "forbid": [
          "any"
        ]
      }
    ],
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 0,
    "react/jsx-curly-spacing": 1,
    "react/jsx-indent-props": 0,
    "react/jsx-key": 1,
    "react/jsx-max-props-per-line": 0,
    "react/jsx-no-bind": 1,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 0,
    "react/jsx-no-undef": 1,
    "react/jsx-pascal-case": 1,
    "react/jsx-sort-prop-types": 0,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/jsx-wrap-multilines": 1,
    "react/no-danger": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 0,
    "react/no-unknown-property": 1,
    "react/prefer-es6-class": 1,
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 0,
    "flowtype/boolean-style": [
      2,
      "boolean"
    ],
    "flowtype/define-flow-type": 1,
    "flowtype/delimiter-dangle": [
      1,
      "always-multiline"
    ],
    "flowtype/generic-spacing": [
      2,
      "never"
    ],
    "flowtype/no-primitive-constructor-types": 2,
    "flowtype/no-types-missing-file-annotation": 2,
    //"flowtype/no-weak-types": 2,
    "flowtype/object-type-delimiter": [
      2,
      "comma"
    ],
    "flowtype/require-parameter-type": 2,
    // "flowtype/require-return-type": [
    //   2,
    //   "always",
    //   {
    //     "annotateUndefined": "never"
    //   }
    // ],
    "flowtype/require-valid-file-annotation": [2, "always"],
    // "flowtype/semi": [
    //   2,
    //   "always"
    // ],
    "flowtype/space-after-type-colon": [
      2,
      "always"
    ],
    "flowtype/space-before-generic-bracket": [
      2,
      "never"
    ],
    "flowtype/space-before-type-colon": [
      2,
      "never"
    ],
    // "flowtype/type-id-match": [
    //   1,
    //   "^([A-Z][a-z0-9]+)+Type$"
    // ],
    "flowtype/union-intersection-spacing": [
      2,
      "always"
    ],
    "flowtype/use-flow-type": 1,
    "flowtype/valid-syntax": 1,
    "prettier/prettier": [
      "error", {
        "singleQuote": true,
        "trailingComma": "all",
        "parser": "flow",
        "useTabs": true,
        "tabWidth": 2,
        "semi": false,
        "bracketSpacing": true,
        "printWidth": 120
    }],
    "emotion/jsx-import": "error",
    "emotion/no-vanilla": "error",
    "emotion/import-from-emotion": "error",
    "emotion/styled-import": "error"
  },
    "overrides": [
        {
            "files": ["*.ts", "*.tsx"],
            "parser": "@typescript-eslint/parser",
            "parserOptions": {
                "ecmaFeatures": {
                    "jsx": true,
                    "useJSXTextNode": true
                }
            },
            "rules": {
                "@typescript-eslint/member-delimiter-style": ["error", {
                    "multiline": {
                        "delimiter": "comma",
                        "requireLast": true
                    },
                    "singleline": {
                        "delimiter": "comma",
                        "requireLast": true
                    }
                }],
                "flowtype/no-types-missing-file-annotation": 0,
                "@typescript-eslint/explicit-function-return-type": "off"
            }
        }
    ],
  "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"],
                "paths": ["src"]
            },
            "eslint-import-resolver-typescript": true
        },
        "import/parsers": {
            "@typescript-eslint/parser": [".ts", ".tsx"]
        },
    "flowtype": {
      "onlyFilesWithFlowAnnotation": true
    },
        "react": {
            "version": "detect"
        }
  }
}

Any idea for this issue?

来源:https://stackoverflow.com/questions/59993606/import-typescript-file-in-flowjs-eslit-flow-cannot-resolve-module

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!