Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
itcloudy opened this issue Sep 30, 2024 · 0 comments
Labels

Comments

@itcloudy
Copy link

itcloudy commented Sep 30, 2024

描述你的问题(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",
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant