选项卡TAB组件 出码 不成功报错

[frogo]

## Describe the bug (required) / 详细描述 bug（必填）

A clear and concise description of what the bug is. / 请提供清晰且精确的 bug 描述

1. 打开 demo；
2. 点击左侧组件-精选组件-选项卡，拖拽到画布中；

3. 点击 “出码”报错如下图：

To Reproduce (required) / 如何复现 bug？（必填，非常重要）

Steps to reproduce the behavior: / 详细复现步骤：

1. 打开 demo；
2. 点击左侧组件-精选组件-选项卡，拖拽到画布中；

3. 点击 “出码”报错如下图：

Expected behavior (required) / 预期行为（必填，非常重要）

A clear and concise description of what did you expect to happen. / 请清晰和精确的描述你预期的行为

---

Screenshots (optional) / bug 截图（可选）

Sceenshots for further information. (If applicable.) / 一些有用的截图将会帮助我们更好的明确以及定位问题

Environments (please complete the following information) (required): / 请提供如下信息（必填）

• AliLowCodeEngine version: [e.g. 1.0.0] / 低代码引擎版本
• AliLowCodeEngineExt version: [e.g. 1.0.0] / 低代码引擎扩展包版本
• Browser [e.g. chrome, safari] / 浏览器版本
• materials / plugins / tools / 其他物料 / 插件 / 工具链版本

(this information can be collected via the manual plugin / 版本信息可通过低代码用户手册插件收集)

Additional context (optional) / 更多额外信息（可选）

Any other context of the problem here. / 可以追加更多的额外信息，帮助定位问题

[LeoYuan]

问题出在 esmodule.ts 里处理 componentName 没有考虑 name.subName 格式~

[frogo]

问题出在 esmodule.ts 里处理 componentName 没有考虑 name.subName 格式~

请问大佬这个应该修改哪个文件才能正常出码？比较迷惑，另外esmodule.ts是在哪个模块里面，没搜到。

[LeoYuan]

https://github.com/alibaba/lowcode-engine/blob/574e348c1e8fa160129d6b90e3a19e2bebb2b301/modules/code-generator/src/plugins/common/esmodule.ts#L304

初步估计是这里，还没来得及细看~

我有个小小的 hack 方案，在调用出码之前，检查一下 schema.componentsMap 里的项目 item，只要 item.componentName 包含 .，就对整个 schema 做个文本替换，比如：schemaInStr.replace('Tab.Item', 'TabItem')。

[frogo]

https://github.com/alibaba/lowcode-engine/blob/574e348c1e8fa160129d6b90e3a19e2bebb2b301/modules/code-generator/src/plugins/common/esmodule.ts#L304

初步估计是这里，还没来得及细看~

我有个小小的 hack 方案，在调用出码之前，检查一下 schema.componentsMap 里的项目 item，只要 item.componentName 包含 .，就对整个 schema 做个文本替换，比如：schemaInStr.replace('Tab.Item', 'TabItem')。

感谢大佬回答，按照你说的，在出码之前，我修改了schema.componentsMap的 item.componentName，手动修改了Tab.Item为TabItem，出码是可以了，但是选项卡组件还是不能用如下图，我想知道如果用完整的TAB选项卡功能，是不是要做很多改动，还是可以有另外一个hack去解决呢，我们部门团队今晚决定要不要使用这个来开发项目，如果选项卡不能用的话，可能切换到正常开发。

[LeoYuan]

图片是出码效果还是预览效果？

[frogo]

图片是出码效果还是预览效果？

是即时编辑和预览的效果，出码以后本地还在跑目前

[LeoYuan]

哦，我建议是预览就不去改 schema，出码才改~

import { ProjectSchema } from '@alilc/lowcode-types';
import CodeGen from '@alilc/lowcode-code-generator';
import createUipaasAppProjectBuilder, {
  UIPaaSAppProjectBuilder
} from '@ali/lowcode-solution-uipaas-app';

const { disk: createDiskPublisher } = CodeGen.publishers;

interface ExportProjectOptions<T> {
  schemaJson: ProjectSchema;
  targetPath: string;
  projectName: string;
  builderOptions?: T;
}

export async function exportProject(options: ExportProjectOptions<UIPaaSAppProjectBuilder>) {
  const uipaasAppBuilder = createUipaasAppProjectBuilder(options.builderOptions);
  const {
    schemaJson,
    targetPath,
    projectName,
  } = options;
  const result = await uipaasAppBuilder.generateProject(schemaJson);

  const publisher = createDiskPublisher();
  await publisher.publish({
    project: result,
    outputPath: targetPath,
    projectSlug: projectName,
    createProjectFolder: true,
  });
}

exportProject({
  schemaJson: hackSchema(originalSchema), // 这里 hack
  ...
});

[frogo]

哦，我建议是预览就不去改 schema，出码才改~

import { ProjectSchema } from '@alilc/lowcode-types';
import CodeGen from '@alilc/lowcode-code-generator';
import createUipaasAppProjectBuilder, {
  UIPaaSAppProjectBuilder
} from '@ali/lowcode-solution-uipaas-app';

const { disk: createDiskPublisher } = CodeGen.publishers;

interface ExportProjectOptions<T> {
  schemaJson: ProjectSchema;
  targetPath: string;
  projectName: string;
  builderOptions?: T;
}

export async function exportProject(options: ExportProjectOptions<UIPaaSAppProjectBuilder>) {
  const uipaasAppBuilder = createUipaasAppProjectBuilder(options.builderOptions);
  const {
    schemaJson,
    targetPath,
    projectName,
  } = options;
  const result = await uipaasAppBuilder.generateProject(schemaJson);

  const publisher = createDiskPublisher();
  await publisher.publish({
    project: result,
    outputPath: targetPath,
    projectSlug: projectName,
    createProjectFolder: true,
  });
}

exportProject({
  schemaJson: hackSchema(originalSchema), // 这里 hack
  ...
});

虽然还没明白这段代码的用意，但是很感谢袁哥的回复和贴代码， 我这边重新描述下我的步骤： 1.拖拽TAB选项卡到编辑区域， 2.修改schema里面的Tab.Item为TabItem，然后保存成功 3.点击“出码”，没有报错，并且可以下载代码到本地运行。

但是页面报错，本地无法运行 请看截图

我开启了localhost:5555代理，本地调试lowcode-engine，然后我还需要做一个hack是吧？

[frogo]

这是修改了修改schema里面的Tab.Item为TabItem，出码后下载到本地跑起来的效果

[LeoYuan]

稍微手改一下，看看差点啥？

应该有这边这句吧？

const TabItem = TabContainer.Item; 

[LeoYuan]

FYI: https://github.com/alibaba/lowcode-materials/pull/51

[LeoYuan]

@alild/fusion-ui@2.0.1

[frogo]

不知道怎么才能让https://lowcode-engine.cn/demo/demo-general/index.html这个界面不报错 https://github.com/alibaba/lowcode-materials/ 这个库和lowcode-engine以及/lowcode-demo有什么联系，我想私有化部署能够解决这个问题

[LeoYuan]

不知道怎么才能让https://lowcode-engine.cn/demo/demo-general/index.html这个界面不报错 https://github.com/alibaba/lowcode-materials/ 这个库和lowcode-engine以及/lowcode-demo有什么联系，我想私有化部署能够解决这个问题

新问题，新 issue，另外建议尽量详细点、条理清楚地描述哈~

[frogo]

不知道怎么才能让https://lowcode-engine.cn/demo/demo-general/index.html这个界面不报错 https://github.com/alibaba/lowcode-materials/ 这个库和lowcode-engine以及/lowcode-demo有什么联系，我想私有化部署能够解决这个问题

新问题，新 issue，另外建议尽量详细点、条理清楚地描述哈~

袁哥其实就是这个TAB选项卡报错的问题，不知道改哪个代码才能解决选选项卡出码报错的问题