Reactjs 我如何让故事书既有反应又苗条

我想为React和苗条组件写故事。我已经有了一些React组件，我正在尝试安装Svelte。我最近的尝试可以运行React或Svelte，具体取决于我是否注释了React配置。如果我不发表评论，当我在故事书中看到我的苗条部分时，我会得到以下信息：

Error: Objects are not valid as a React child (found: object with keys {Component}). If you meant to render a collection of children, use an array instead.
    in unboundStoryFn
    in ErrorBoundary
    (further stack trace)

这是指我的故事

stories/test.svelte stories.js

：

从'@storybook/svelte'导入{storiesOf}；
从“../src/testComponentGroup/TestSvelteComponent.svelte”导入TestSvelteComponent；
storiesOf（'TestSvelteComponent'，模块）
.add（'苗条测试'，（）=>({
组件：TestSveltComponent
}));

我的配置如下：

.storybook/config.js

：

import./config.react'；//如果我注释掉这句话，我可以在故事书中使用“苗条”组件，但当然我的react故事不会出现。
导入“/config.svelte”；

.storybook/config.react.js

：

从'@storybook/react'导入{configure}；
const req=require.context（'../stories'，true，/\.react stories\.js$/）；
函数loadStories（）{
req.keys（）.forEach（文件名=>req（文件名））；
}
配置（加载故事、模块）；

.storybook/config.svelte.js

：

从'@storybook/svelte'导入{configure}；
const req=require.context（'../stories'，true，/\.svelte stories\.js$/）；
函数loadStories（）{
req.keys（）.forEach（文件名=>req（文件名））；
}
配置（加载故事、模块）；

.storybook/webpack.config.js

：

module.exports=async（{config，mode}）=>{
让j；
//从网页包配置中查找svelteloader
const svelteloader=config.module.rules.find（（r，i）=>{
if（r.loader&&r.loader.includes（'svelte-loader'））{
j=i；
返回true；
}
});
//将预处理安全地注入到配置中
配置模块规则[j]={
…苗条的领导者，
选项：{
…svelteloader.options，
}
}
//返回覆盖的配置
返回配置；
}

src/testComponentGroup/TestSvelteComponent.svelte

：

你好

---

似乎它试图通过Svelte测试文件解析JSX，但如果我同时导入React和Svelte配置，我仍然可以看到React组件正常运行。

请参阅github上的讨论：

现在不可能了，计划在v7.0中使用 现在的正式任务是创建两组配置（预览和管理），实例化两个单独的故事书，然后使用合成将两个故事书组装成一个。

谢谢。现在我会让这个答案成为“正确”的答案。