无法在Vue项目中使用React

moshuying commented 1 year ago

您好，我的项目使用了 vue3和react 18。尝试在项目中使用react three fiber却一直报错

react-dom.development.js:14887  Uncaught Error: Objects are not valid as a React child (found: object with keys {__v_isVNode, __v_skip, type, props, key, ref, scopeId, slotScopeIds, children, component, suspense, ssContent, ssFallback, dirs, transition, el, anchor, target, targetAnchor, staticCount, shapeFlag, patchFlag, dynamicProps, dynamicChildren, appContext, ctx}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (react-dom.development.js:14887:9)
    at reconcileChildFibers2 (react-dom.development.js:15828:7)
    at reconcileChildren (react-dom.development.js:19167:28)
    at mountIndeterminateComponent (react-dom.development.js:20157:5)
    at beginWork (react-dom.development.js:21587:16)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)

moshuying commented 1 year ago

翻遍相关issue没有看到类似的解决方案

moshuying commented 1 year ago

tsx 组件在编译时不一定能看到报错，先写JSX组件处理掉报错后即可，我这边的报错是找不到deri包，尽管再package.json中有，还是需要再安装一遍（NPM背锅！）

KingGanZeng commented 11 months ago

我也遇到了这个报错，原因是因为我的tsconfig中extends了@vue/tsconfig/tsconfig.json，其中定义了jsx的编译规则：

jsxImportSource，是用于指定从哪个模块导入 JSX 工厂函数在这个配置里，react jsx会转入vue的编译规则里，解决办法就是移除这个extends，手动添加需要的规则，最简单的版本是这样的：

{
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "vite.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "types": [
      "node"
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

gloriasoft / veaury

无法在Vue项目中使用React #94