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

[xianghongai]

Describe the bug

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

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 <MonacoEditor height="30vh" theme="vs-dark" onMount={handleEditorDidMount} value={value} defaultLanguage="json" />;
}

export default Editor;

然后，出现以下异常：

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

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

Additional context

脚手架信息：

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'
    },

依赖信息：

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

[ClarkXia]

先试试去掉 start 脚本上的 --speedup，另外使用 @monaco-editor/react 配合 loader 加载资源，monaco-editor-webpack-plugin 并不是必选

[xianghongai]

尝试去掉 --speedup，去掉 monaco-editor-webpack-plugin，尝试通过 @monaco-editor/react 的 loader 实现：

// src/pages/demo/index.tsx

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

loader.config({ monaco });

重新执行 npm start，出现异常：

[xianghongai]

终端中提示：

$ npm start

> @ice/antd-pro-scaffold@1.3.0 start
> ice start

webpack 5.88.2 compiled with 1 warning in 13913 ms

 WARN  Client compiled with warnings.                                                                                                                                                                                                                                 10:34:57


 WARN  Warning                                                                                                                                                                                                                                                        10:34:57
(46:2) autoprefixer: end value has mixed support, consider using flex-end instead

                                                                                                                                                                                                                                                                      10:34:57
 Starting the development server at:

    - Local  : http://localhost:3000/
    - Network: http://10.77.32.47:3000/

<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/xiang/Workspaces/Projects/web-app/ice-app--ant-design-pro/node_modules/@ice/bundles/compiled/css-loader/index.js??ruleSet[1].rules[2].use[1]!/Users/xiang/Workspaces/Projects/web-app/ice-app--ant-design-pro/node_modules/@ice/bundles/compiled/postcss-loader/index.js??ruleSet[1].rules[2].use[2]!/Users/xiang/Workspaces/Projects/web-app/ice-app--ant-design-pro/node_modules/monaco-editor/esm/vs/editor/contrib/hover/browser/hover.css': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning

[xianghongai]

按下面操作成功了：

1、清理 package.json 依赖

• 删除 @monaco-editor/react 依赖
• 添加 monaco-editor-webpack-plugin 依赖
• 去掉 start 指令 --speedup 选项 (@ClarkXia 这个对开发体验有较大影响么？)。

{
  "dependencies": {
      "monaco-editor": "^0.52.2",  
  },
  "devDependencies": {
    "monaco-editor-webpack-plugin": "^7.1.0",
  },
  "scripts": {
    "start": "ice start",
  },
}

2、配置构建：ice.config.mts

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


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

3、封装编辑器组件

src/components/MonacoEdito/index.tsx:

import { useRef, useState, useEffect } from 'react';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import styles from './Editor.module.css'; // .Editor { width: 100vw; height: 100vh; }

export default function MonacoEditor(props: any) {
  const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
  const monacoEl = useRef(null);

  useEffect(() => {
    if (monacoEl) {
      setEditor((editor) => {
        if (editor) return editor;

        return monaco.editor.create(monacoEl.current!, {
          value: props.value,
          language: props.language,
          theme: props.theme,
        });
      });
    }

    return () => editor?.dispose();
  }, [monacoEl.current]);

  useEffect(() => {
    if (editor) {
      editor.setValue(props.value);
    }
  }, [props.value]);

  return <div className={styles.Editor} ref={monacoEl} />;
}

4、调用组件

src/pages/demo/index.tsx:

import { Card } from 'antd';
import { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import MonacoEditor from '@/components/MonacoEditor';

export default function Demo() {
  const [editorValue, setEditorValue] = useState('');

  return (
    <PageContainer>
      <Card>
        {/* 生成源码的组件 */}       
      </Card>
      <Card>
        {/* 展示源码 */}
        <MonacoEditor value={editorValue} language="json" theme="vs-dark" />
      </Card>
    </PageContainer>
  );
}

[ClarkXia]

--speedup 在后续 4.0 版本下将完善对先有 webpack 插件体系的支持