search

NervJS / taro

开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
https://docs.taro.zone/
Other
35.34k stars 4.77k forks source link

react ts提示异常 #11097

Closed EdivenH closed 2 years ago

EdivenH commented 2 years ago

相关平台

微信小程序

复现仓库

https://github.com/NervJS 小程序基础库: 2.21.2 使用框架: React

复现步骤

从@tarojs/components引入 View Text 组件，ts 报错

“View”不能用作 JSX 组件。 其元素类型 "ReactElement<any, any> | Component<ViewProps, any, any> | null" 不是有效的 JSX 元素。ts(2786)

期望结果

ts 正确提示

实际结果

ts报错

环境信息

$ taro info
👽 Taro v3.4.0

  Taro CLI 3.4.0 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
      npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
zhangxf97 commented 2 years ago

我也遇到了相同的问题

zhangxf97 commented 2 years ago

使用 React，请安装 @tarojs/plugin-framework-react 使用 Vue2，请安装 @tarojs/plugin-framework-vue2 使用 Vue3，请安装 @tarojs/plugin-framework-vue3 详见：https://github.com/NervJS/taro/releases/tag/v3.4.0

EdivenH commented 2 years ago

有解决办法嘛

greenhaixia commented 2 years ago

有临时解决方法吗？

ZakaryCode commented 2 years ago

有临时解决方法吗？

上面已经说了咯

greenhaixia commented 2 years ago

上面的我加了没用

Sent from my iPhone

On Jan 17, 2022, at 16:13, Zakary @.***> wrote:

 有临时解决方法吗？

上面已经说了咯

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.

gitlun commented 2 years ago

上面的我加了没用 … Sent from my iPhone On Jan 17, 2022, at 16:13, Zakary @.***> wrote:  有临时解决方法吗？ 上面已经说了咯 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.

用npm 6安装没问题，用npm8安装有问题

khronosleung commented 2 years ago

上面的我加了没用 … Sent from my iPhone On Jan 17, 2022, at 16:13, Zakary @.***> wrote:  有临时解决方法吗？ 上面已经说了咯 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.

用npm 6安装没问题，用npm8安装有问题

npm8也有一样问题

khronosleung commented 2 years ago

跟这个issues问题一样，参考以下操作就可以临时解决了，手动删除不科学，等版本迭代吧

https://github.com/NervJS/taro/issues/8583#issuecomment-1014644927

@gitlun @greenhaixia

zomem commented 2 years ago

image 删除这个就可以了

Chen-jj commented 2 years ago

@EdivenH @zhangxf97 @gitlun @khronosleung @zomem 新建了个 React TS 项目测试，没有发现该问题。

按 @khronosleung @zomem 的说法，问题是 @vue/runtime-dom 的类型导致的，但新建 React 项目应该不会安装 vue 的运行时依赖。

分析 yarn.lock，只有 babel-preset-taro 依赖了 Vue 部分编译时包而已：

image

arniu commented 2 years ago

@ZakaryCode 兄弟，问题关的有点儿勤～

问题还没有彻底解决，希望重开此问题。

Chen-jj commented 2 years ago

@ZakaryCode 兄弟，问题关的有点儿勤～

问题还没有彻底解决，希望重开此问题。

这个问题的确没有复现额，如果各位排查后还有问题，欢迎提供更详细的信息，随时 reopen 的

khronosleung commented 2 years ago

背景：因为升级项目package.json的taro依赖包版本，删除整个node_modules后，使用npm install重新安装，就出现ts提示异常问题，使用yarn安装就不会出现此问题。

node: v16.13.0 npm: 8.1.0

分析了 package-lock.json：

@tarojs/webpack-runner

"@tarojs/webpack-runner": {
  "version": "3.4.0",
  "resolved": "https://registry.npmmirror.com/@tarojs/webpack-runner/download/@tarojs/webpack-runner-3.4.0.tgz",
  "integrity": "sha512-kflSpvP4L+VAD3SMTCsiFQ1tAITySocX7hbQvsrsiKj2DrlYaDu7RU2JjI15k5SS+bh3aYnX4U14xGLu4XjvJw==",
  "dev": true,
  "requires": {
    "@babel/core": "^7.14.5",
    "@tarojs/components": "3.4.0",
    "@tarojs/helper": "3.4.0",
    "@tarojs/plugin-framework-react": "3.4.0",
    "@tarojs/plugin-framework-vue2": "3.4.0",
    "@tarojs/plugin-framework-vue3": "3.4.0",
    // ....
  },
  "dependencies": {
    // ....
  }
}

@tarojs/plugin-framework-vue3

"node_modules/@tarojs/plugin-framework-vue3": {
  "version": "3.4.0",
  "resolved": "https://registry.npmmirror.com/@tarojs/plugin-framework-vue3/download/@tarojs/plugin-framework-vue3-3.4.0.tgz",
  "integrity": "sha512-FsGXM0aw+2s1GawZbHPYL/yV/cd89XNqge4phVMi93YFrrMN/DPgR1fbox+Ehdr5j0GjyWVOj8vHElFlAXS1dQ==",
  "dev": true,
  "license": "MIT",
  "dependencies": {
    "@tarojs/helper": "3.4.0",
    "@tarojs/runner-utils": "3.4.0",
    "@tarojs/runtime": "3.4.0",
    "@tarojs/shared": "3.4.0",
    "webpack": "4.46.0"
  },
  "peerDependencies": {
    "vue": "^3.0.0"
  }
}

vue

"vue": {
  "version": "3.2.29",
  "resolved": "https://registry.npmmirror.com/vue/download/vue-3.2.29.tgz",
  "integrity": "sha512-cFIwr7LkbtCRanjNvh6r7wp2yUxfxeM2yPpDQpAfaaLIGZSrUmLbNiSze9nhBJt5MrZ68Iqt0O5scwAMEVxF+Q==",
  "dev": true,
  "peer": true,
  "requires": {
    "@vue/compiler-dom": "3.2.29",
    "@vue/compiler-sfc": "3.2.29",
    "@vue/runtime-dom": "3.2.29",
    "@vue/server-renderer": "3.2.29",
    "@vue/shared": "3.2.29"
  }
}

发现在npm@8，peerDependencies 被自动安装了，自行demo验证：

{
  "name": "package-a",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.15"
  },
  "devDependencies": {
    "react": "^16.13.0"
  },
  "peerDependencies": {
    "query-string": ">7.0.0"
  }
}
npm install

npm@6.14.15 image

npm@8.1.0~8.3.2 image

arniu commented 2 years ago

vue 与 react 是不相容的，强行把二者捏在一块儿，总归有些不妥当～

bobsam commented 2 years ago

@Chen-jj @ZakaryCode 目前更新到taro 3.4.1，问题依旧，确实删除了node_modues @vue 的文件夹后，报错消失。希望Taro团队可以跟进一下哈，很多人报错，确实是有问题的。

Chen-jj commented 2 years ago

发现在npm@8，peerDependencies 被自动安装了

看来是这个问题，我们再追踪一下

taro-bot2[bot] commented 2 years ago

Hello~

你的问题楼上已经提供了解决方案，如果没有更多的问题这个 issue 将在 7 天后被自动关闭。

如果您在这 7 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

cncaihong commented 2 years ago

更新到taro 3.4.1，遇到同样问题，持续更进。

GitKou commented 2 years ago

感觉并没有解决啊，我taro update project 3.4.2更新至了3.4.2，还是会报错。删了包，再装，还是报错。

'View' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<ViewProps, any, any> | null' is not a valid JSX element.ts(2786)

package.json

{
  "name": "XXX",
  "version": "1.0.0",
  "private": true,
  "description": "XXXX",
  "templateInfo": {
    "name": "react-native",
    "typescript": true,
    "css": "sass"
  },
  "scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:jd": "taro build --type jd",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch --qr",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch",
    "android": "react-native run-android --no-packager",
    "ios": "react-native run-ios --no-packager",
    "start": "npm run dev:rn --",
    "podInstall": "pod-install",
    "test": "jest",
    "test:coverage": "jest --coverage",
    "upgradePeerdeps": "install-peerdeps @tarojs/taro-rn@3.3.19 -o -Y && install-peerdeps @tarojs/components-rn@3.3.19 -o -Y && install-peerdeps @tarojs/router-rn@3.3.19 -o -Y && pod-install",
    "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx",
    "prettier": "prettier --write ./src",
    "precommit": "lint-staged",
    "test:staged": "jest --bail --findRelatedTests",
    "prepare": "husky install",
    "deploy:dev": "taro build --type h5 &&  NODE_ENV=development node ./deploy",
    "deploy:prod": "taro build --type h5 && NODE_ENV=production node ./deploy"
  },
  "browserslist": [
    "last 3 versions",
    "Android >= 4.1",
    "ios >= 8"
  ],
  "author": "",
  "dependencies": {
    "@babel/runtime": "^7.7.7",
    "@codler/react-native-keyboard-aware-scroll-view": "^2.0.0",
    "@react-native-async-storage/async-storage": "~1.15.11",
    "@react-native-community/cameraroll": "~4.1.2",
    "@react-native-community/clipboard": "~1.5.1",
    "@react-native-community/geolocation": "~2.0.2",
    "@react-native-community/masked-view": "~0.1.11",
    "@react-native-community/netinfo": "~7.1.2",
    "@react-native-community/slider": "~4.1.12",
    "@react-native-picker/picker": "~2.2.1",
    "@taroify/core": "^0.0.23-alpha.0",
    "@tarojs/components": "3.4.2",
    "@tarojs/react": "3.4.2",
    "@tarojs/runtime": "3.4.2",
    "@tarojs/taro": "3.4.2",
    "@tarojs/taro-rn": "3.3.19",
    "cross-env": "^7.0.3",
    "default-passive-events": "^2.0.0",
    "dva-core": "^2.0.4",
    "dva-loading-ts": "^3.0.23",
    "dva-loading": "^3.0.22",
    "expo-av": "~9.2.3",
    "expo-barcode-scanner": "~10.2.2",
    "expo-brightness": "~9.2.2",
    "expo-camera": "~11.2.2",
    "expo-file-system": "~11.1.3",
    "expo-image-picker": "~10.2.3",
    "expo-keep-awake": "~9.2.0",
    "expo-permissions": "~12.1.1",
    "expo-sensors": "~10.2.2",
    "jweixin-module": "^1.6.0",
    "lodash": "^4.17.21",
    "mini-html-parser2": "^0.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-native": "^0.66.0",
    "react-native-device-info": "~8.4.8",
    "react-native-gesture-handler": "1.10.3",
    "react-native-head-tab-view": "^4.0.0-rc.13",
    "react-native-image-resizer": "~1.4.5",
    "react-native-iphone-x-helper": "^1.3.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-pager-view": "~5.4.9",
    "react-native-reanimated": "*",
    "react-native-safe-area-context": "~3.3.2",
    "react-native-screens": "~2.18.1",
    "react-native-scrollable-tab-view": "1.0.0",
    "react-native-smart-refresh": "^1.1.6",
    "react-native-svg": "~12.1.1",
    "react-native-syan-image-picker": "0.4.10",
    "react-native-tab-view": "^3.1.1",
    "react-native-tab-view-collapsible-header": "^2.0.1",
    "react-native-unimodules": "~0.14.10",
    "react-native-webview": "~11.14.3",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2",
    "redux-actions": "^2.6.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.4.1",
    "schema-typed": "^2.0.2",
    "scp2": "^0.5.0",
    "taro-virtual-list": "^1.0.13",
    "teaset": "file:./thirdFrameworks/teaset"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@commitlint/cli": "^16.2.1",
    "@commitlint/config-conventional": "^16.2.1",
    "@tarojs/cli": "3.4.2",
    "@tarojs/mini-runner": "3.4.2",
    "@tarojs/rn-runner": "3.4.2",
    "@tarojs/webpack-runner": "3.4.2",
    "@types/react": "^17.0.2",
    "@types/webpack-env": "^1.13.6",
    "@typescript-eslint/eslint-plugin": "^4.15.1",
    "@typescript-eslint/parser": "^4.15.1",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.4.6",
    "babel-preset-taro": "3.4.2",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.2",
    "eslint": "^7.14.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "8.4.0",
    "eslint-config-taro": "3.4.2",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "^7.8.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-react-native": "^4.0.0",
    "eslint-plugin-react-native-a11y": "^3.2.1",
    "husky": "^7.0.4",
    "install-peerdeps": "^3.0.3",
    "jest": "^27.4.7",
    "jest-circus": "^27.5.1",
    "lint-staged": "^12.3.4",
    "metro-react-native-babel-preset": "^0.69.1",
    "node-forge": "^1.2.1",
    "pod-install": "^0.1.23",
    "prettier": "2.5.1",
    "prop-types": "^15.8.1",
    "stylelint": "^14.3.0",
    "stylelint-config-taro-rn": "^3.4.2",
    "stylelint-taro-rn": "^3.4.2",
    "typescript": "^4.1.0"
  }
}
Tom-Jack-Huang commented 2 years ago

安装 react-redux 后会报这个错！

TangSeng-Liu commented 2 years ago

经过几轮测试，确实是在安装redux之后出现的类型冲突，@Chen-jj可以尝试复现一下

TangSeng-Liu commented 2 years ago

经过几轮测试，确实是在安装redux之后出现的类型冲突，@Chen-jj可以尝试复现一下

临时解决办法是删除node_modules -> @type -> hoist-non-react-statics 和 react-redux

jhxxs commented 2 years ago

issue 8583 这个有用

GitKou commented 2 years ago

issue 8583 这个有用

对我这里没用，用他这个https://github.com/NervJS/taro/issues/11097#issuecomment-1097497205 有用

jhxxs commented 2 years ago

issue 8583 这个有用

对我这里没用，用他这个#11097 (comment) 有用

另外，如果你的项目里装了@types/react-native也会导致View类型报错，可以卸载该类型文件

bobsam commented 2 years ago

+1，我这边也是经常报这样的错，删除 node_modules/@vue 就行了。

PS: 我是用React的

front-refined commented 2 years ago

+1，我这边也是经常报这样的错，删除 node_modules/@VUE 就行了。

PS: 我是用React的

+1，有没有什么 npm 钩子可以监听 node_modules 更新，因为每次有新增/更新包，@vue又出现了。。。

twoheartliu commented 2 years ago

same problem…

weiaohan commented 2 years ago

经过几轮测试，确实是在安装redux之后出现的类型冲突，@Chen-jj可以尝试复现一下

临时解决办法是删除node_modules -> @type -> hoist-non-react-statics 和 react-redux

一样的问题，删除@types/react-redux可以解决

Chen-jj commented 2 years ago

复现：

调查拓扑后发现，当开发者项目本地依赖了 @tarojs/cli 并且使用 npm 7+ 安装依赖时，会复现此问题。

原因：

因为 @tarojs/cli 依赖 @tarojs/plugin-framework-vue3，而后者的 peerDependencies 依赖了 vue。正如 @khronosleung 所指明的：npm 7+ 会把 peerDependencies 也进行安装。此时开发者的项目同时存在 react 和 vue 的类型依赖文件，又因为 @tarojs/taro/types/taro.component.d.ts 使用了 /// 同时引入了 react 和 vue 的类型，最终两者类型冲突导致开发者报错：

“View”不能用作 JSX 组件。
其元素类型 "ReactElement<any, any> | Component<ViewProps, any, any> | null" 不是有效的 JSX 元素。ts(2786)

解决

其它

关于楼上有同学提到了安装 redux 也会产生此问题，我这边是没有复现的。可以等等 Taro v3.4.8 再试试，如果还有问题，请提供一下详细的复现流程。

taro-bot2[bot] commented 2 years ago

Hello~

你的问题楼上已经提供了解决方案，如果没有更多的问题这个 issue 将在 7 天后被自动关闭。

如果您在这 7 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

Mrjen commented 2 years ago

关于楼上有同学提到了安装 redux 也会产生此问题，我这边是没有复现的。

这个其实就是app.tsx使用redux 引入的 Provider就会有这个问题

image image
Chen-jj commented 2 years ago

补充

关于楼上提到的 redux 引起的类型问题，虽然报错类似，但引发的原因是不一样的。

react-redux v7 依赖 @types/react-redux，后者有一个依赖：

"@types/react": "*"

版本号指定为 * 时，我理解是可以依赖任意版本。当拓扑中有其它包也依赖了 @types/react，无需再进行安装。NPM 是这样做的，而 yarn 则不是。yarn 会根据 * 安装最新版本的 @types/react，当 react18 发布后，就安装上基于 react18 的 @types/react，同时开发者 package.json 指定了 react17 的 @types/react。最终两者冲突而产生问题。

解决办法

  1. 各位可以删除 node_modules 后使用 npm i 重新安装依赖，这样能最快解决问题。
  2. Taro 在 redux 模板中增加 resolutions，这样新建的项目能避免此问题：
{
  "resolutions": {
    "@types/react": "17.0.2"
  }
}
  1. Taro 兼容 React 18，升级 react-redux 和 @types/react，在下个大版本 v3.5 支持
xiaofei315 commented 2 years ago

试一下安装或者升级@types/react-dom

sendking commented 2 years ago

试一下安装或者升级@types/react-dom

node v17.0.1 , npm 8.1.0 使用此方法成功解决

codedart2018 commented 2 years ago

还是有，好恶心啊！

jinmingpang commented 2 years ago

试一下安装或者升级@types/react-dom

我这边引起这个问题是因为 安装了 @testing-library/react，这个包依赖了 @types/react-dom@18.0.0 ，我强制在 package.json里 安装 @types/react-dom@^17 ， 然后这个问题就修复了。

@codedart2018 你试试，安装对应版本的react-dom

cbtan commented 2 years ago

"react": "17.0.0", "react-dom": "17.0.0", "@types/react": "17", "@types/react-dom": "17",

都改成 17，我解决了

innocces commented 2 years ago

这个问题在yarn里也同样存在. 用上面大家的玄学貌似都无法曲线救国

ghost commented 2 years ago

这个问题在yarn里也同样存在. 用上面大家的玄学貌似都无法曲线救国

尝试了一下，在 package.json 里增加 resolutions 节点是有效的 可以再试试看

Assone commented 2 years ago

@tarojs/components导出的组件ts提示异常(***不是有效的JSX Element）。

image

复现

  1. npx create-turbo@latest初始化一个monorepo项目
  2. 进入生成的项目的apps目录下
  3. 用taro init初始化一个taro react项目
  4. 用pnpm create vite初始化一个react ts项目和一个vue ts项目
  5. 查看taro项目的pages/index/index.tsx文件，View组件提示不是有效的JSX Element

点击定义进去发现@types/react和@vue/runtime-dom的JSX.Element的接口合并异常了，因为react和vue定义的JSX.Element的类型不一致，接口无法合并，所以会提示异常。

仓库为monorepo，有react的项目，也有vue的项目，所以不能移除两者的类型声明文件。

解决方法

  1. 在tsconfig.json里添加 
     "compilerOptions": {
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "react/jsx-runtime": ["./types/jsx-runtime.d.ts"]
    }
  },

  2. 在types文件夹下创建一个名为jsx-runtime.d.ts的文件，并写入以下内容

    declare global {
  namespace JSX {
    // @ts-ignore
    type Element = any;
  }
}

export {};
Assone commented 2 years ago

@tarojs/components导出的组件ts提示异常(***不是有效的JSX Element）。

补充一下，使用的taro版本为3.5

makeng commented 1 year ago

版本 3.2，删除 node_modules/@types 下的所有的 namespace JSX{} 有用 WX20221026-204741@2x

zula1994 commented 1 year ago

6 现在都不出一个版本解决这个问题吗

KinXpeng commented 1 year ago

3.6.2的版本里还是存在这个问题，用npm、yarn以及npx创建项目都试过了，一直解决不了

image image

这个问题咋还是好几版本了都没有解决呢 用了上面 @Assone 提供的在types下新建类型文件，在tsconfig.json中引入的方式解决了。

towry commented 1 year ago

https://github.com/towry/n/issues/174

检查当前vscode用的 jsx 类型是否正确：

type TestJsx = JSX.Element

鼠标悬浮到 JSX 上点击，看看 vscode 用的是不是 OK的。

OPEN-9 commented 1 year ago

Disable all vue-related extension packages of vscode, which is effective for me. It is recommended to try it out.

godlanbo commented 1 year ago

非常恶心，即使是最新的taro版本，独立起项目可以解决，但是在monorepo项目中，taro.component.d.ts 中，导入vue的行为会因为monorepo中有其他项目安装vue而导致读到vue的类型，注释掉这一行就可以正常。 目前用pnpm patch强行解决了，想问这种多包不能分开吗，类型混在一起依靠 d.ts 找不到对应依赖来解决感觉不太好配合monorepo image

alswl commented 1 year ago

我是安装 "taro-hooks": "^2.0.1" 引入的问题，退到 "taro-hooks": "^1.5.10" 就没有问题了。