react引入amis/amis-editor 提示报错

[KemingRen]

描述问题：

本地的nextjs13+react18项目 引入amis后点击源码按钮 会报错 提示

Unhandled Runtime Error

Error: Unexpected usage

Error: Unexpected usage at EditorSimpleWorker.loadForeignModule (webpack-internal:///./node_modules/amis-ui/node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js:469:31) at eval (webpack-internal:///./node_modules/amis-ui/node_modules/monaco-editor/esm/vs/editor/common/services/webWorker.js:44:30)

但是我本地已经引入const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')插件 并在next.config.js使用了

webpack: (config, options) => { config.module.rules.push({ test: /.svg$/, use: ['@svgr/webpack'] }); config.resolve.alias['@'] = path.resolve(__dirname, './src'); // config.NODE_BASE_URL = process.env.NODE_BASE_URL config.plugins.push(new MonacoWebpackPlugin({ languages: ['javascript'] })); return config; },

截图或视频：

可以的话，尽可能提供截图或视频来补充描述你的问题...

如何复现（请务必完整填写下面内容）：

进入页面 等amis加载完后点击代码按钮

1. 你是如何使用 amis 的？ npm

2. amis 版本是什么？请先在最新 beta 版本测试问题是否存在

"amis": "^3.1.1", "amis-editor": "^5.4.1",

3. 粘贴有问题的完整 amis schema 代码：

'use client'
import { useState, useEffect } from "react";
import dynamic from 'next/dynamic';
// import { Editor } from 'amis-editor';
import type { SchemaObject } from "amis";
import { render as renderAmis } from "amis";
import type { Schema } from "amis/lib/types";
import requst from '@/utils/request'
// 引入样式
import "amis/lib/themes/default.css";
import "amis/lib/helper.css";
import "amis/sdk/iconfont.css";
import "amis-editor-core/lib/style.css";
import "amis-ui/lib/themes/antd.css";
// const Editor = dynamic(() => import("amis-editor").then(mod => {
//     // 动态导入后，手动执行配置等初始化操作
//     // mod.setSchemaTpl({});
//     return mod.Editor;
// }), {
//     ssr: false,  // 关闭服务端渲染
//     loading: () => <p>Loading Editor...</p>
// });
const Editor = dynamic(() => import("amis-editor").then(mod => {
    // 动态导入后，手动执行配置等初始化操作
    // mod.setSchemaTpl({});
    return mod.Editor;
}), {
    ssr: false,  // 关闭服务端渲染
    loading: () => <p>Loading Editor...</p>
});
type Props = {
    defaultPageConfig?: Schema;
    codeGenHandler?: (codeObject: Schema) => void;
    pageChangeHandler?: (codeObject: Schema) => void;
};

export default function Amis(props: Props) {
    console.log('jinru');
    const [show, setShow] = useState(false);
    const [mobile, setMobile] = useState(false);
    const [preview, setPreview] = useState(false);
    const [defaultPageConfig] = useState<Schema>(props.defaultPageConfig); // 传入配置
    const defaultSchema: Schema | SchemaObject = defaultPageConfig || {
        type: "page",
        body: "",
        title: "标题",
        regions: ["body"],
    };
    const [schema] = useState(defaultSchema);
    let pageJsonObj: Schema = defaultSchema;
    const onChange = (value: Schema) => {
        pageJsonObj = value;
        props.pageChangeHandler && props.pageChangeHandler(value);
    };
    const onSave = () => {
        props.codeGenHandler && props.codeGenHandler(pageJsonObj);
    };
    useEffect(() => {
        setShow(true);
    }, [])

    if (!show) {
        return null;
    }

    return (
        <>

            {renderAmis({
                type: "form",
                mode: "inline",
                title: "",
                body: [
                    {
                        type: "switch",
                        option: "预览",
                        name: "preview",
                        onChange: function (v: any) {
                            setPreview(v);
                        },
                    },
                    {
                        type: "switch",
                        option: "移动端",
                        name: "mobile",
                        onChange: function (v: any) {
                            setMobile(v);
                        },
                    },
                    {
                        type: "button",
                        label: "保存",
                        level: "primary",
                        onClick: function () {
                            onSave();
                        },
                    },
                    {
                        type: "button",
                        label: "退出",
                        level: "danger",
                        onClick: function () {
                            // if (!window.confirm('确定退出?')) return;
                            // if (props.cancleGenHandler) props.cancleGenHandler();
                        },
                    },
                ],
            })}
            <Editor
                preview={preview}
                isMobile={mobile}
                onChange={onChange}
                value={schema as SchemaObject}
                theme={"antd"}
                onSave={onSave}
                amisEnv={{
                    fetcher: requst
                }}

            />

            {/* 其他需要渲染的组件... */}
        </>
    );
}

4. 操作步骤
就是进入页面 点击代码按钮就成这样了

[github-actions[bot]]

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

[2betop]

要不你先尝试，能不能引入 monaco-editor？我感觉这个问题可能跟 amis 无关

[KemingRen]

我刚刚试过引入monaco-editor 没啥问题呀 页面也没有报错

[2betop]

要不来一个可复现的最小项目仓库？

[snowing-x]

请问一下这个问题解决了吗？