🧐[问题] 使用VSCode 时 src 目录下文件无法正确解析对 umi 的 import，例如：import Effect Module '"../../../../node_modules/umi/types"' has no exported member 'Effect'.ts(2305)

elyotlee commented 4 years ago

🧐 问题描述

使用 npm create umi 创建项目并安装依赖后，在 VSCode 中打开项目，src 目录下所有文件头部对于 umi 模块的 import 都会显示 ts2305 错误，如 src/pages/form/basic-form/model.ts 中：

import Effect
Module '"../../../../node_modules/umi/types"' has no exported member 'Effect'.ts(2305)

请问该如何解决？虽然不影响应用实际运行，但是看着编辑器中一堆红线和红色文件名感觉很糟...😖

部分环境版本信息：

VSCode: v1.45.0
node.js: v12.16.3
npm: v6.14.4

项目 package.json 内容：

{
  "name": "ant-design-pro",
  "version": "1.0.0",
  "private": true,
  "description": "ant-design-pro",
  "scripts": {
    "analyze": "cross-env ANALYZE=1 umi build",
    "build": "umi build",
    "deploy": "npm run site && npm run gh-pages",
    "dev": "npm run start:dev",
    "fetch:blocks": "pro fetch-blocks --branch=umi@3 && npm run prettier",
    "gh-pages": "cp CNAME ./dist/ && gh-pages -d dist",
    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
    "postinstall": "umi g tmp",
    "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:prettier": "prettier --check \"**/*\" --end-of-line auto",
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
    "prettier": "prettier -c --write \"**/*\"",
    "start": "umi dev",
    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none umi dev",
    "start:no-mock": "cross-env MOCK=none umi dev",
    "start:no-ui": "cross-env UMI_UI=none umi dev",
    "start:pre": "cross-env REACT_APP_ENV=pre umi dev",
    "start:test": "cross-env REACT_APP_ENV=test MOCK=none umi dev",
    "pretest": "node ./tests/beforeTest",
    "test": "umi test",
    "test:all": "node ./tests/run-tests.js",
    "test:component": "umi test ./src/components",
    "tsc": "tsc"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write"
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "dependencies": {
    "@ant-design/icons": "^4.0.0",
    "@ant-design/pro-layout": "^5.0.8",
    "@ant-design/pro-table": "^2.1.11",
    "@antv/data-set": "^0.11.0",
    "@antv/l7": "^2.0.0",
    "@antv/l7-maps": "^2.0.0",
    "@types/lodash.debounce": "^4.0.6",
    "@types/lodash.isequal": "^4.5.5",
    "antd": "^4.0.0",
    "bizcharts": "^3.5.3-beta.0",
    "bizcharts-plugin-slider": "^2.1.1-beta.1",
    "classnames": "^2.2.6",
    "dva": "^2.4.0",
    "gg-editor": "^2.0.2",
    "lodash": "^4.17.11",
    "lodash-decorators": "^6.0.0",
    "lodash.debounce": "^4.0.8",
    "lodash.isequal": "^4.5.0",
    "mockjs": "^1.0.1-beta3",
    "moment": "^2.24.0",
    "numeral": "^2.0.6",
    "nzh": "^1.0.3",
    "omit.js": "^1.0.2",
    "path-to-regexp": "2.4.0",
    "prop-types": "^15.5.10",
    "qs": "^6.9.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-fittext": "^1.0.0",
    "react-helmet-async": "^1.0.4",
    "react-router": "^4.3.1",
    "umi": "^3.0.14",
    "umi-request": "^1.0.8",
    "use-merge-value": "^1.0.1"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^1.0.18",
    "@types/classnames": "^2.2.7",
    "@types/express": "^4.17.0",
    "@types/history": "^4.7.2",
    "@types/jest": "^25.1.0",
    "@types/lodash": "^4.14.144",
    "@types/qs": "^6.5.3",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.8.4",
    "@types/react-helmet": "^5.0.13",
    "@umijs/fabric": "^2.0.5",
    "@umijs/plugin-blocks": "^2.0.5",
    "@umijs/preset-ant-design-pro": "^1.0.1",
    "@umijs/preset-react": "^1.4.8",
    "@umijs/preset-ui": "^2.0.9",
    "carlo": "^0.9.46",
    "chalk": "^4.0.0",
    "cross-env": "^7.0.0",
    "cross-port-killer": "^1.1.1",
    "detect-installer": "^1.0.1",
    "enzyme": "^3.11.0",
    "eslint": "^6.8.0",
    "express": "^4.17.1",
    "gh-pages": "^2.0.1",
    "husky": "^4.0.7",
    "jsdom-global": "^3.0.2",
    "lint-staged": "^10.0.0",
    "mockjs": "^1.0.1-beta3",
    "prettier": "^2.0.1",
    "pro-download": "1.0.1",
    "puppeteer-core": "^2.1.1",
    "stylelint": "^13.0.0"
  },
  "engines": {
    "node": ">=10.0.0"
  },
  "checkFiles": [
    "src/**/*.js*",
    "src/**/*.ts*",
    "src/**/*.less",
    "config/**/*.js*",
    "scripts/**/*.js"
  ]
}

💻 示例代码

无

🚑 其他信息

无

liulinzhe commented 4 years ago

同样的问题，求各位是怎么解决这种引入报错的，虽然不影响运行，但是VSCode一直提示语法错误也挺难受的。

chenshuai2144 commented 4 years ago

tsconfig.json 中有配置吗？这个东西使用来找到具体的类型地址的

"paths": {
      "@/*": ["./src/*"],
      "@@/*": ["./src/.umi/*"]
    }

elyotlee commented 4 years ago

tsconfig.json 中有配置吗？这个东西使用来找到具体的类型地址的
"paths": {
      "@/*": ["./src/*"],
      "@@/*": ["./src/.umi/*"]
    }

@chenshuai2144 谢谢回复，参考该配置检查项目后发现是 jsconfig.json 文件中对应的 paths 配置缺少了这一项：

"@@/*": ["./src/.umi/*"]

添加后即可解决 VSCode 中对 umi 类型引用的问题😄

liulinzhe commented 4 years ago

我这边儿是有这个配置的，但是依然报错，十分不解。 "@@/": ["./src/.umi/"]

elyotlee commented 4 years ago

我这边儿是有这个配置的，但是依然报错，十分不解。 "@@/": ["./src/.umi/"]

@liulinzhe 项目目录下的 tsconfig.json 和 jsconfig.json 两个配置文件都需要在 paths 属性中加上这个配置： "@@/*": ["./src/.umi/*"]，而且 *glob 通配符 `` 是不能省略的**，希望对你有所帮助。

millievn commented 3 years ago

我这边儿是有这个配置的，但是依然报错，十分不解。 "@@/": ["./src/.umi/"]

@liulinzhe 项目目录下的 tsconfig.json 和 jsconfig.json 两个配置文件都需要在 paths 属性中加上这个配置： "@@/*": ["./src/.umi/*"]，而且 *glob 通配符 `` 是不能省略的**，希望对你有所帮助。

好像并没有效果

lolocoo commented 3 years ago

我这边儿是有这个配置的，但是依然报错，十分不解。 "@@/": ["./src/.umi/"]

@liulinzhe 项目目录下的 tsconfig.json 和 jsconfig.json 两个配置文件都需要在 paths 属性中加上这个配置： "@@/*": ["./src/.umi/*"]，而且 *glob 通配符 `` 是不能省略的**，希望对你有所帮助。

好像并没有效果

配置完，完全退出编辑器，再打开。

ant-design / ant-design-pro