网上的信息太少了，记录一下
我的项目是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 onlytest: 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依赖库以支持运行
)
