Skip to content

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

@itcloudy

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",

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