code 展开的代码文件直接展示组件代码，而不是使用代码

[BrotaOne]

Question

code 对应的直接展示了 Boo 组件的代码了，没有 demo 文件

期望两种都能展示 demo 文件

只有 jsx 方式引入的展示了 demo 文件的代码

Sample Code

index.md 文件

This is an example component.

<code src="./demo.tsx"></code>

> ```jsx
> import App from './demo';
> 
> export default () => <App />;
> ```

<API id="Boo"></API>

demo.tsx文件

import React from 'react';
import Boo from './index';
export default () => <div>demo
   <Boo title="demo" />
</div>;

index.tsx文件

// src/index.tsx
import React, { type FC } from 'react';

interface Props {
  /**
   * @description 属性描述
   * @default "默认值"
   */
  title?: string;
}

export const Boo: FC<Props> = ({title = 'defalut'}) => <h1>{title}</h1>;

export default Boo;

[PeachScript]

提供最小可复现仓库

[BrotaOne]

提供最小可复现仓库

pnpm i
pnpm start

https://github.com/BrotaOne/dumiDocsDemo

[whinc]

遇到同样的问题，通过下面方式书写时，demo 正常渲染，但是demo的源文件并非./demo.tsx，而是展示的demo所在组件库包中的全部源文件。

预期行为：demo 展开的源文件应当仅包含./demo.tsx相关文件（相对导入的文件）

<code src="./demo.tsx"></code>

[Zhou-Bill]

定位到bug了， 以上通过import Boo from './index' , 其中index依赖文件覆盖了原组件

临时解决: 先把 文件名改成其他

[PeachScript]

以上通过import Boo from './index'

这个不是正确用法，会把组件源码也带到 demo 源码里，dumi 的最佳实践是从包名引入：https://d.umijs.org/guide/write-demo#%E5%A6%82%E4%BD%95%E5%BC%95%E5%85%A5%E7%BB%84%E4%BB%B6

cc @BrotaOne @whinc

[whinc]

以上通过import Boo from './index'

这个不是正确用法，会把组件源码也带到 demo 源码里，dumi 的最佳实践是从包名引入：https://d.umijs.org/guide/write-demo#%E5%A6%82%E4%BD%95%E5%BC%95%E5%85%A5%E7%BB%84%E4%BB%B6

cc @BrotaOne @whinc

调整成从包名导入后正常了，感谢👍

[BrotaOne]

以上通过import Boo from './index'

这个不是正确用法，会把组件源码也带到 demo 源码里，dumi 的最佳实践是从包名引入：https://d.umijs.org/guide/write-demo#%E5%A6%82%E4%BD%95%E5%BC%95%E5%85%A5%E7%BB%84%E4%BB%B6

cc @BrotaOne @whinc

多谢，从包名导入后正常了