alibaba / alibaba/ice

ICE3 引入 monaco-editor-webpack-plugin 发生异常

Open
#7,073 5 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
18.6k
Forks
2.1k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

第一步:配置构建:`ice.config.mts`:

```js
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';

export default defineConfig(() => ({
webpack: (webpackConfig) => {
webpackConfig.plugins?.push(new MonacoWebpackPlugin());
return webpackConfig;
},
}));
```

第二步:封装一个编辑器组件:`src/components/Editor/index.tsx`:

```
import * as monaco from 'monaco-editor';
import MonacoEditor, { loader } from '@monaco-editor/react';
import { useRef } from 'react';

loader.config({ monaco });

function Editor({ value }: { value: string }) {
const editorRef = useRef(null);
function handleEditorDidMount(editor: any) {
editorRef.current = editor;
}
return ;
}

export default Editor;

```

然后,出现以下异常:

```txt
Compile Error: 09:35:12
Failed to compile the code, please refer to the following errors for troubleshooting.
× Error: × Rspack FS Error: Error: ENOENT: no such file or directory, unlink '/Users/xiang/Workspaces/Projects/web-app/ice-app--ant-design-pro/build/assets-manifest.json'
│ │
│ ╰─▶ Error: ENOENT: no such file or directory, unlink '/Users/xiang/Workspaces/Projects/web-app/ice-app--ant-design-pro/build/assets-manifest.json'


× Conflict: Multiple assets emit different content to the same filename assets-manifest.json

× Conflict: Multiple assets emit different content to the same filename assets-manifest.json
```

![](https://github.com/user-attachments/assets/08fa61b9-382d-4f93-96f0-a49383fda00d)

### Expected behavior

能正常使用 monaco-editor。

### Actual behavior

_No response_

### Version of ice.js

"@ice/app": "^3.4.0",

### Content of build.json or ice.config.mts

```TypeScript

```

### Additional context

脚手架信息:

```txt
pkg: {
name: '@ice/antd-pro-scaffold',
version: '1.3.0',
description: 'ice.js 3 Pro 模板(基于 Ant Design)',
dependencies: [Object],
devDependencies: [Object],
scripts: [Object],
publishConfig: [Object],
repository: 'git@github.com:ice-lab/react-materials.git'
},
```

依赖信息:

```json
{
"dependencies": {
"@ant-design/charts": "^1.4.2",
"@ant-design/icons": "^4.7.0",
"@ant-design/pro-form": "^2.2.8",
"@ant-design/pro-layout": "^7.1.6",
"@ant-design/pro-table": "^3.0.17",
"@ice/runtime": "^1.4.0",
"@monaco-editor/react": "^4.7.0",
"antd": "^4.24.0",
"lodash": "^4.17.21",
"monaco-editor": "^0.52.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@applint/spec": "^1.2.3",
"@ice/app": "^3.4.0",
"@ice/plugin-auth": "^1.0.0",
"@ice/plugin-request": "^1.0.0",
"@ice/plugin-store": "^1.0.0",
"@types/node": "^18.11.17",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"eslint": "^8.35.0",
"monaco-editor-webpack-plugin": "^7.1.0",
"stylelint": "^15.2.0",
"typescript": "^4.8.4"
},
}
```

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the build with the plugin configuration in ice.config.mts and the Monaco component in src/components/Editor/index.tsx. Trace why the build emits or removes build/assets-manifest.json more than once. Done means the project builds successfully with Monaco enabled and no assets-manifest.json conflict or ENOENT error.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript, webpack
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.