react ts提示异常 #11097

EdivenH · 2022-01-13T08:28:49Z

复现仓库

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

The text was updated successfully, but these errors were encountered:

zhangxf97 · 2022-01-13T08:38:45Z

我也遇到了相同的问题

zhangxf97 · 2022-01-13T08:42:31Z

使用 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 · 2022-01-13T08:52:43Z

有解决办法嘛

greenhaixia · 2022-01-17T03:51:38Z

有临时解决方法吗？

ZakaryCode · 2022-01-17T08:12:51Z

有临时解决方法吗？

上面已经说了咯

greenhaixia · 2022-01-17T11:15:17Z

上面的我加了没用

…

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 · 2022-01-17T15:31:04Z

上面的我加了没用
…
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 · 2022-01-18T00:55:37Z

上面的我加了没用
…
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 · 2022-01-18T03:18:47Z

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

#8583 (comment)

@gitlun @greenhaixia

zomem · 2022-01-18T03:35:35Z

删除这个就可以了

Chen-jj · 2022-01-22T10:02:21Z

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

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

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

arniu · 2022-01-25T03:41:15Z

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

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

Chen-jj · 2022-01-25T03:48:07Z

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

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

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

khronosleung · 2022-01-25T03:58:58Z

背景：因为升级项目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

npm@8.1.0~8.3.2

arniu · 2022-01-25T04:03:17Z

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

bobsam · 2022-01-26T03:34:17Z

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

Chen-jj · 2022-01-26T05:45:36Z

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

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

taro-bot2 · 2022-01-26T06:30:21Z

Hello~

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

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

Good luck and happy coding~

cncaihong · 2022-01-26T10:36:51Z

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

* fix(cli): 删除 CLI 冗余依赖，fix #11097 * chore(mini-ci): 让 mini-ci 不再默认安装字节、百度、支付宝的 ci 工具 * fix: ci * fix: ci

Mrjen · 2022-04-20T01:01:14Z

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

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

Chen-jj · 2022-04-20T16:12:17Z

补充

关于楼上提到的 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。最终两者冲突而产生问题。

解决办法

各位可以删除 node_modules 后使用 npm i 重新安装依赖，这样能最快解决问题。
Taro 在 redux 模板中增加 resolutions，这样新建的项目能避免此问题：

{
  "resolutions": {
    "@types/react": "17.0.2"
  }
}

Taro 兼容 React 18，升级 react-redux 和 @types/react，在下个大版本 v3.5 支持

NervJS/taro#11097 (comment)

xiaofei315 · 2022-04-24T15:12:51Z

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

sendking · 2022-04-25T03:48:52Z

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

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

codedart2018 · 2022-05-12T03:24:57Z

还是有，好恶心啊！

jinmingpang · 2022-05-13T12:19:50Z

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

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

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

cbtan · 2022-06-25T04:31:26Z

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

都改成 17，我解决了

innocces · 2022-06-28T12:18:40Z

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

ghost · 2022-07-01T09:10:39Z

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

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

Assone · 2022-08-05T05:27:07Z

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

复现

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

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

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

解决方法

在tsconfig.json里添加

 "compilerOptions": {
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "react/jsx-runtime": ["./types/jsx-runtime.d.ts"]
    }
  },

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

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

export {};

Assone · 2022-08-05T05:31:59Z

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

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

makeng · 2022-10-26T12:50:21Z

版本 3.2，删除 node_modules/@types 下的所有的 namespace JSX{} 有用

zula1994 · 2023-04-12T08:24:02Z

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

KinXpeng · 2023-04-13T06:47:10Z

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


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

towry · 2023-05-11T09:35:02Z

towry/n#174

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

type TestJsx = JSX.Element

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

OPEN-9 · 2023-05-27T01:54:27Z

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

godlanbo · 2023-06-07T07:16:19Z

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

alswl · 2023-07-01T08:39:06Z

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

innocces · 2023-07-02T04:29:48Z

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

=。- 因为 taro-hooks@2 在多框架适配的情况下默认 optionalDependencies 包含了 vue 的依赖。会命中上面的小伙伴们说的情况。所以需要你根据上面提供的方法锁一下对应的类型内容。

r1005410078 · 2023-09-08T05:18:10Z

Set the version of @types/react as follows "@types/react": "^17.0.44".
In your tsconfig.json under compilerOptions set -
"paths": {
"react": [ "./node_modules/@types/react"]
}

minzojian · 2023-10-29T16:58:25Z

towry/n#174

检查当前vscode用的 jsx 类型是否正确：
type TestJsx = JSX.Element
鼠标悬浮到 JSX 上点击，看看 vscode 用的是不是 OK的。

我这边是monorepo，因为升级个别子项目的依赖包，导致了根目录里的node_modules和taro子工程里的node_modules安装了两个版本的@types/react
后来我把所有的工程的依赖包都同步更新到最新，删除了yarn.lock重新安装了一下，规避了多版本安装的问题后。
这个错误的提示就移除了

可以根据上边这个引用里提到的方法。点击一下JSX后看看跳到哪里去了来判断是跳到子工程自己的包，还是根目录下统一的包。

name-q · 2024-04-01T06:27:42Z

yarn add -D @types/react

EdivenH closed this as completed Jan 13, 2022

EdivenH reopened this Jan 13, 2022

ZakaryCode added the A-typings Area - TypeScript Typings 相关 label Jan 15, 2022

ZakaryCode added the resolved label Jan 17, 2022

ZakaryCode closed this as completed Jan 17, 2022

Chen-jj reopened this Jan 26, 2022

taro-bot2 bot added the to be closed label Jan 26, 2022

taro-bot2 bot assigned ZakaryCode Jan 26, 2022

ZakaryCode added a commit that referenced this issue Jan 27, 2022

fix: update dependencies fix #11097

12c57f4

ZakaryCode mentioned this issue Jan 27, 2022

fix: update dependencies fix #11097 #11214

Merged

3 tasks

taro-bot2 bot removed the to be closed label Feb 2, 2022

Chen-jj added a commit that referenced this issue Apr 19, 2022

fix(cli): 删除 CLI 冗余依赖，fix #11097 (#11672)

0571eed

* fix(cli): 删除 CLI 冗余依赖，fix #11097 * chore(mini-ci): 让 mini-ci 不再默认安装字节、百度、支付宝的 ci 工具 * fix: ci * fix: ci

Chen-jj reopened this Apr 20, 2022

Chen-jj closed this as completed Apr 20, 2022

Chen-jj added a commit to NervJS/taro-project-templates that referenced this issue Apr 20, 2022

fix(redux): 修复 redux 模板类型问题

69127ff

NervJS/taro#11097 (comment)

Chen-jj mentioned this issue Apr 26, 2022

chore(release): publish 3.4.8 #11723

Merged

wenxiuYang mentioned this issue May 30, 2022

vscode 编译器一直提示 View 等 taro 提供的标签类型错误 #11814

Closed

Chen-jj mentioned this issue Jul 4, 2022

view不能用作jsx组件版本为3.4.13 #12029

Closed

SuperSaiyr mentioned this issue Jan 9, 2024

在 pnpm workspace 的情况下, 包内引入文件的时候不应当使用静态的包名, 而应当尝试绝对路径 #15089

Open

react ts提示异常 #11097

react ts提示异常 #11097

Comments

EdivenH commented Jan 13, 2022

相关平台

复现仓库

复现步骤

期望结果

实际结果

环境信息

zhangxf97 commented Jan 13, 2022

zhangxf97 commented Jan 13, 2022

EdivenH commented Jan 13, 2022 • edited Loading

greenhaixia commented Jan 17, 2022

ZakaryCode commented Jan 17, 2022

greenhaixia commented Jan 17, 2022 via email

gitlun commented Jan 17, 2022

khronosleung commented Jan 18, 2022 • edited Loading

khronosleung commented Jan 18, 2022

zomem commented Jan 18, 2022

Chen-jj commented Jan 22, 2022

arniu commented Jan 25, 2022 • edited Loading

Chen-jj commented Jan 25, 2022

khronosleung commented Jan 25, 2022 • edited Loading

arniu commented Jan 25, 2022 • edited Loading

bobsam commented Jan 26, 2022

Chen-jj commented Jan 26, 2022

taro-bot2 bot commented Jan 26, 2022

cncaihong commented Jan 26, 2022

Mrjen commented Apr 20, 2022

Chen-jj commented Apr 20, 2022 • edited Loading

补充

解决办法

xiaofei315 commented Apr 24, 2022

sendking commented Apr 25, 2022

codedart2018 commented May 12, 2022

jinmingpang commented May 13, 2022

cbtan commented Jun 25, 2022

innocces commented Jun 28, 2022

ghost commented Jul 1, 2022

Assone commented Aug 5, 2022

复现

解决方法

Assone commented Aug 5, 2022

makeng commented Oct 26, 2022 • edited Loading

zula1994 commented Apr 12, 2023

KinXpeng commented Apr 13, 2023

towry commented May 11, 2023 • edited Loading

OPEN-9 commented May 27, 2023

godlanbo commented Jun 7, 2023

alswl commented Jul 1, 2023 • edited Loading

innocces commented Jul 2, 2023 • edited Loading

r1005410078 commented Sep 8, 2023

minzojian commented Oct 29, 2023 • edited Loading

name-q commented Apr 1, 2024

EdivenH commented Jan 13, 2022 •

edited

Loading

khronosleung commented Jan 18, 2022 •

edited

Loading

arniu commented Jan 25, 2022 •

edited

Loading

khronosleung commented Jan 25, 2022 •

edited

Loading

arniu commented Jan 25, 2022 •

edited

Loading

Chen-jj commented Apr 20, 2022 •

edited

Loading

makeng commented Oct 26, 2022 •

edited

Loading

towry commented May 11, 2023 •

edited

Loading

alswl commented Jul 1, 2023 •

edited

Loading

innocces commented Jul 2, 2023 •

edited

Loading

minzojian commented Oct 29, 2023 •

edited

Loading