使用veaury，在vue项目中运行react组件

网上的信息太少了，记录一下
我的项目是vue3+webpack
使用：veaury
Veaury 是基于React和Vue3的工具库，主要用于React和Vue在一个项目中公共使用的场景，主要运用在项目迁移、技术栈融合的开发模式、跨技术栈使用第三方组件的场景。
参考：
https://github.com/gloriasoft/veaury/tree/master/dev-project-vue3

建议：把这个项目拉下来运行，如果自己项目存在依赖报错，可以在这个项目上修改对比测试

如果是用vite直接看项目主页的配置：
https://github.com/gloriasoft/veaury/tree/master

    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "veaury": "^2.6.2",
    "babel-preset-react-app": "^10.1.0",

因为react版本高于19.0，在main.js中配置：

// react-dom >= 19
import { createRoot } from 'react-dom/client'
import { setVeauryOptions } from 'veaury'
setVeauryOptions({
  react: {
    createRoot
  }
})

写了一个测试用的TestComponent.jsx

import React from 'react'
console.log('React========>?', React)
const TestComponent = () => {
  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '5px' }}>
      <h1>Hello from React!</h1>
      <p>This is a test React component rendered inside a Vue app.</p>
    </div>
  )
}

export default TestComponent

在vue代码中使用：

<template>
	<div>
		<iconContent/>
	</div>
</template>
<script>
import { applyPureReactInVue } from 'veaury'
import TestComponent from '@/views/ai/react/base/app-icon/TestComponent.jsx'
export default {
  components: {
    iconContent: applyPureReactInVue(TestComponent)
  },
}

运行报错：
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, targetStart, targetAnchor, staticCount, shapeFlag, patchFlag, dynamicProps, dynamicChildren, appContext, ctx}). If you meant to render a collection of children, use an array instead.

我最开始把这段配置漏了

加上之后运行又报错：

‘loose’ mode configuration must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled).

我的配置里用了
plugins: [
‘@babel/plugin-transform-private-methods’
]
@babel/plugin-transform-private-methods 插件，来处理依赖中类中的私有方法（以 # 开头的方法）。
如果你没有用，应该不会报错了


最终babel.config.js文件：

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['veaury/babel/ReactPreset', {
      // for dev only
      test: function (filename) {
        // The files in the following paths are compiled with React's jsx
        // 我的react代码都放在react目录下
        if (filename?.startsWith(resolve('src')) && filename.match(/[/\\]react[\\/$]+/) || filename?.startsWith(resolve('../src'))) return filename
      }
    }]
  ],
  plugins: [
    ['@babel/plugin-transform-class-properties', { loose: true }],
    ['@babel/plugin-transform-private-methods', { loose: true }],
    ['@babel/plugin-transform-private-property-in-object', { loose: true }]
  ]
}

重启运行

ok，最基础的完成了

因为我的项目没有用ts，所以没有用ts的写法
但我要集成的react组件全是用ts写的
后面看看是自行转化成js还是装ts依赖库以支持运行