Skip to content

[BUG] error occurred in the <AppRenderer> component and Cannot find Provider of ConfigBrowserModule #192

Description

@itcloudy

描述你的问题(Describe the bug)

  1. 使用官方文档https://codeblitz.opensumi.com/zh/docs/develop/api-docs中的【完整示例参考】将其嵌入到antdesignpro中

  2. 路由配置:
    { name: '', path: '/ide/:platform/:owner/:name/:ref', layout: false, menuRender: false, component: './ide', },

  3. 页面代码pages/ide.tsx如下
    import React from 'react';
    import { CodeServiceModule } from '@codeblitzjs/ide-code-service';
    import { useParams } from '@umijs/max';

// codeblitz
import {
AppRenderer,
SlotLocation,
SlotRenderer,
SplitPanel,
BoxPanel,
} from '@codeblitzjs/ide-core/bundle';
import '@codeblitzjs/ide-core/bundle/codeblitz.css';
// codeblitz

// 语法高亮
import '@codeblitzjs/ide-core/languages/html';
import '@codeblitzjs/ide-core/languages/handlebars';
import '@codeblitzjs/ide-core/languages/css';
import '@codeblitzjs/ide-core/languages/scss';
import '@codeblitzjs/ide-core/languages/less';
import '@codeblitzjs/ide-core/languages/javascript';
import '@codeblitzjs/ide-core/languages/typescript';
import '@codeblitzjs/ide-core/languages/json';
// end

// 语言功能
import html from '@codeblitzjs/ide-core/extensions/codeblitz.html-language-features-worker';
import css from '@codeblitzjs/ide-core/extensions/codeblitz.css-language-features-worker';
import typescript from '@codeblitzjs/ide-core/extensions/codeblitz.typescript-language-features-worker';
import json from '@codeblitzjs/ide-core/extensions/codeblitz.json-language-features-worker';

// 布局配置,可根据需要增删模块
export const layoutConfig = {
[SlotLocation.action]: {
modules: [''],
},
[SlotLocation.left]: {
modules: ['@opensumi/ide-explorer'],
},
[SlotLocation.main]: {
modules: ['@opensumi/ide-editor'],
},
// [SlotLocation.bottom]: {
// modules: ['@opensumi/ide-output', '@opensumi/ide-markers'],
// },
[SlotLocation.statusBar]: {
modules: ['@opensumi/ide-status-bar'],
},
};

// 界面布局组件,可根据需要调整
const LayoutComponent = () => (









);
const overrideColorTokens = {
'editorGroupHeader.tabsBackground': '#ECF1FE',
'editor.background': '#fff',
'aiNative.inlineDiffAddedRange': '#26bf6d1f',
'aiNative.inlineDiffRemovedRange': '#ff4d4f1e',
'aiNative.inlineDiffAcceptPartialEdit': '#26bf6d80',
'aiNative.inlineDiffDiscardPartialEdit': '#ff4d4f80',
'aiNative.inlineDiffAcceptPartialEdit.foreground': '#000',
}

const App: React.FC = () => {
const params = useParams();
const platform = params.platform || 'github';
const owner = params.owner || '';
const name = params.name || '';
const ref = params.ref || 'main';
const commit = '';
console.log(platform, owner, name, ref, commit);
// for codeup
const projectId = '';
return (
<div style={{ width: '100%', height: '100%' }}>
<AppRenderer
key='ide'
appConfig={{
// 扩展
extensionMetadata: [html, css, typescript, json],
// 工作空间目录,最好确保不同项目名称不同,如 group/repository 的形式,工作空间目录会挂载到 /workspace 根目录下
workspaceDir: ${platform}/${owner}/${name},
layoutConfig,
layoutComponent: LayoutComponent,
// 默认偏好设置
defaultPreferences: {
'editor.previewMode': false,
'general.theme': 'opensumi-design-light-theme',
},
useSimplifyExplorerPanel: true,
// 左侧面板默认宽度
panelSizes: {
[SlotLocation.left]: 220,
},
modules: [
CodeServiceModule.Config({
platform,
owner: owner,
name: name,
refPath: ref,
commit: commit,
hash: location.hash,
// for codeup
projectId: projectId,
gitlink: {
// for proxy
endpoint: '/code-service',
},
atomgit: {
// atomgit token https://atomgit.com/-/profile/tokens
token: '',
},
gitee: {
// gitee token https://gitee.com/profile/personal_access_tokens
recursive: true,
token: '',
},
codeup: {
// for proxy
endpoint: '/code-service',
},
}),
],

    }}
    runtimeConfig={{
      onWillApplyTheme() {
        return overrideColorTokens;
      },
      // 禁止就改文件树,此时无法新增、删除、重命名文件
      disableModifyFileTree: false,
      // 默认打开文件
      workspace: {
        filesystem: {
          fs: 'InMemory',
        },
      },
    }}
  />
</div>

);
};
export default App;

打开浏览器http://localhost:8000/ide/github/opensumi/core/main

复现路径(To Reproduce)

截屏2024-09-30 19 45 48

预期表现(Expected behavior)
能看到github仓库代码

环境信息(Environment)

  • OS: macos
  • Browser: chrome
  • Codeblitz Version: 2.1.0
    "@codeblitzjs/ide-code-service": "^2.1.0",
    "@codeblitzjs/ide-core": "^2.1.0",
    "@opensumi/di": "^2.1.0",
    "@opensumi/ide-core-browser": "^3.4.1",
    "@opensumi/ide-main-layout": "^3.4.1",
    "@opensumi/ide-utils": "^3.4.1",

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions