ant design整合amis 2.0.2，amis-editor 5.1.9出现"remark" has already exists

[dong-gy]

我也有这个问题，我是用的ant design整合amis 2.0.2，amis-editor 5.1.9 ,好像是这两个路径下都有个Remark.js的组件，名字一样。amis/esm/renderers和amis/lib/renderers.低版本没有这个问题，升级到2就会出现

Originally posted by @dong-gy in https://github.com/baidu/amis/issues/4777#issuecomment-1184044739

[nwind]

也可能是 webpack 版本太低，估计要升到 5

[stevieyu]

我也有这个问题, 用的打包工具是 react-scripts@5.0.1 , 默认就是 webpack 5, 无任何新增组件

import {useState, useEffect} from 'react'
import {Editor as AmisEditor} from 'amis-editor';
import {Button} from 'amis';
import {schemaJsonUrl} from './monacoEditorDefineLoad.js'
import './utils/DisabledEditorPlugin.jsx';

import 'amis-editor/dist/style.css'

const defaultValue = {
    "type": "page",
    "title": "默认标题",
    "body": [
        {
            "type": "tpl",
            "tpl": "这是你刚刚新增的页面。",
            "inline": false
        }
    ]
}

export default function Editor(props) {
    const {value = null, onSave, onCancel} = props;
    useEffect(() => {
        if(value) setStateAssign({value})
    }, [value]);

    const defaultProps = {
        // value: defaultValue,
        autoFocus: true,
        // preview: false,
        $schemaUrl: schemaJsonUrl(),
        plugins: [],
        onChange: (val) => setStateAssign({value: val})
    }
    const [state, setState] = useState({
        preview: false,
        value: value || defaultValue
    })
    const setStateAssign = (obj) => setState((prevState) => ({...prevState, ...obj}))

    const PreviewBtn = () => {
        const setPreview = () => setStateAssign({
            preview: !state.preview,
        })
        return <Button level="info" onClick={setPreview}>{state.preview && '取消'}预览</Button>
    }
    const SaveBtn = () => {
        const on = () => onSave(state.value)
        return <Button level="success" onClick={on}>保存</Button>
    }
    const CancelBtn = () => {
        const on = () => onCancel()
        return <Button onClick={on}>取消</Button>
    }

    const Header = () => {
        const style = {
            display: 'flex',
            padding: '.4rem .8rem',
            justifyContent: 'space-between',
            alignItems: 'center',
            borderBottom: '1px solid #e8e9eb',
            background: '#fff'
        }
        return (
            <div style={style}>
                <div>xx</div>
                <div>
                    <SaveBtn />&nbsp;
                    <PreviewBtn />&nbsp;
                    <CancelBtn />
                </div>
            </div>
        )
    }

    const style = {
        height: '100vh',
        minHeight: '600px',
        display: 'flex',
        flexDirection: 'column'
    }
    const editorProps = {...defaultProps, ...state}
    return (
        <div style={style}>
            <Header />
            <AmisEditor {...editorProps}/>
        </div>
    )
}

仓库地址: https://github.com/stevieyu/amis-editor-react-script-template

[hsm-lv]

补个配置试试：

configureWebpack: {
        resolve: {
          conditionNames: ['require', 'node']
        }
}

[stevieyu]

补个配置试试：

configureWebpack: {
        resolve: {
          conditionNames: ['require', 'node']
        }
}

这个方案可行, 但是最好还是amis-editor支持esm最好

[stevieyu]

不过涉及弹窗的组件拖过去没反应,闪一下就消失,比如表单,增删改查

[duqingyu]

我目前按上面的操作配置完，amis-editor有一些组件选中后右边的操作栏报错非法使用hooks，请问有遇到这个吗？webpack版本也是5.x

[hyzx86]

也可能是 webpack 版本太低，估计要升到 5

有办法屏蔽掉这个Remark 么？比如加载编辑器的时候排除掉这个

[hyzx86]

总结一下这个问题，目前我使用 ant-design-pro@5.2.0 + amis@2.1.0 + amis-editor@5.1.9-beta.0，之前反馈以上的问题，目前已经解决了。由于我是参考amis-editor-demo最新代码写的Editor，经过测试在route/Editor.tsx中有两处使用了图标和 导致了该问题产生，当注释掉这两行代码之后，就不会再出现这个问题，ant design pro中也不需要修改任何配置。

@dong-gy 这 。。不科学啊。。这算啥原理啊。。

[hyzx86]

完美修复： umi 配置更新如下

  chainWebpack: function (config) {
  //monaco 加载问题
    config.plugin('monaco').use(new MonacoWebpackPlugin())
// 解决Remark 重复注册问题
    config.merge({
      resolve: {
        conditionNames: ['require', 'node']
      }
    })
  }

然后示例中的Icon amis 中不知道为什么查找icon的路径是 /static/xxx.svg 可以直接用 antd 的 Icon 重新实现下

[huayan1]

chainWebpack

这是配置到哪里呀？

[hyzx86]

[locusd]

@hyzx86 请问下MonacoWebpackPlugin是这样设置的吗

[hyzx86]

@locusd 还要注意跟 monaco-editor 版本对应，具体参考 monaco-editor-webpack-plugin 插件主页说明 不然给你一顿的报错

[locusd]

@hyzx86 是的，已解决，感谢

[seantech2000]

根据描述的处理了，依然是同样的错误，但是页面刷新就好了，每次重新打开都会报这个错误

[hyzx86]

根据描述的处理了，依然是同样的错误，但是页面刷新就好了，每次重新打开都会报这个错误

更新版本到最新

[seantech2000]

根据描述的处理了，依然是同样的错误，但是页面刷新就好了，每次重新打开都会报这个错误

更新版本到最新

已经最新了，amis V2.6.0，amis-editor: "5.2.3"，奇怪的是路由首次进入报这个错，刷新下页面就能出来编辑器

[hyzx86]

是的5.2.3这个问题又出现了😱

[seantech2000]

这东西看来无解了

[hyzx86]

降级。。一个版本一个版本尝试。。

   "amis": "2.6.0",
    "amis-core": "2.6.0",
    "amis-editor": "5.2.3-beta.16",
    "amis-editor-core": "5.2.3-beta.16",
    "amis-formula": "2.6.0",
    "amis-ui": "2.6.0",

目前工作良好

[africa1207]

降级。。一个版本一个版本尝试。。

   "amis": "2.6.0",
    "amis-core": "2.6.0",
    "amis-editor": "5.2.3-beta.16",
    "amis-editor-core": "5.2.3-beta.16",
    "amis-formula": "2.6.0",
    "amis-ui": "2.6.0",

目前工作良好

你好，我目前用的antdpro v6，集成的官网amis-editor最新demo版本，

    "amis": "3.4.0-beta.12",
    "amis-core": "3.4.0-beta.12",
    "amis-editor": "5.6.0-beta.0",
    "amis-editor-core": "5.6.0-beta.0",
    "amis-formula": "3.4.0-beta.12",
    "amis-ui": "3.4.0-beta.12",
-----------
   "monaco-editor-webpack-plugin": "6.0.0",

config.ts中按照你的改法

 chainWebpack: (config, { env, webpack }) => {
    //monaco 加载问题
    config
      .plugin('monaco')
      .use(
        new MonacoWebpackPlugin({ languages: ['json', 'javascript', 'css', 'html', 'typescript'] }),
      );
    // 解决Remark 重复注册问题
    config.merge({
      resolve: {
        conditionNames: ['require', 'node'],
      },
    });
    return config;
  },

editor中 又出现其他报错Error: The renderer with name "ae-formulacontrol" has already exists, please try another name!，有时也会出现remark has already...

[hyzx86]

@africa1207 小伙砸， 给你们一个忠告。。别用umi， 太重了 层层依赖 封装 如果喜欢antd pro layout 可以 只使用 pro component 组件库 绕开umi 新开个干净的项目 或者使用比较简洁的脚手架来使用 amis

本身 amis 也是一个 大而全的 组件库，很有可能跟 antd pro 的组件依赖产生问题 ，比如 moment 比如国际化 等等 ，不同的脚手架 相同的功能 使用方式不同也会出现问题 用了很久 antd pro 幸好还没有给用户部署。。。悬崖勒马为时不晚~~~

[africa1207]

@africa1207 小伙砸， 给你们一个忠告。。别用umi， 太重了 层层依赖 封装 如果喜欢antd pro layout 可以 只使用 pro component 组件库 绕开umi 新开个干净的项目 或者使用比较简洁的脚手架来使用 amis

本身 amis 也是一个 大而全的 组件库，很有可能跟 antd pro 的组件依赖产生问题 ，比如 moment 比如国际化 等等 ，不同的脚手架 相同的功能 使用方式不同也会出现问题 用了很久 antd pro 幸好还没有给用户部署。。。悬崖勒马为时不晚~~~

没法子。。上面要用antd pro，现在陷里面了。。所以这报错有什么解决办法吗

[hyzx86]

@africa1207 小伙砸， 给你们一个忠告。。别用umi， 太重了 层层依赖 封装 如果喜欢antd pro layout 可以 只使用 pro component 组件库 绕开umi 新开个干净的项目 或者使用比较简洁的脚手架来使用 amis 本身 amis 也是一个 大而全的 组件库，很有可能跟 antd pro 的组件依赖产生问题 ，比如 moment 比如国际化 等等 ，不同的脚手架 相同的功能 使用方式不同也会出现问题 用了很久 antd pro 幸好还没有给用户部署。。。悬崖勒马为时不晚~~~

没法子。。上面要用antd pro，现在陷里面了。。所以这报错有什么解决办法吗

不晓得 。。 ，我用的 3.3.0 +editor 5.5.0 ，不行就换个领导吧