[amis-editor-demo]-使用webpack打包，编辑模式报错

[rencoo]

描述问题：

amis-editor-demo 开发模式，route > Editor.tsx 引入 amis-editor 报错，具体报错位置如下: amis-core > esm > factory.js > Renderer > registerRenderer if (renderersMap[config.name]) { throw new Error("The renderer with name \"".concat(config.name, "\" has already exists, please try another name!")); }

截图或视频：

Uncaught Error: The renderer with name "remark" has already exists, please try another name!

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

amis-editor-demo master最新commit，package.json 里依赖 amis@2.0.2、amis@2.0.2、amis-editor@5.1.9、amis-ui@2.0.2、amis-widget@1.3.8

除了form、spinner、alert、dialog、drawer等（renderersMap[config.name] = config.component !== Placeholder; 判定为false），其他206个类型都会出现重复注册的问题（renderersMap[config.name] = config.component !== Placeholder; 判定为true）

[rencoo]

amis-editor-demo master 分支 commit 73edba742dc207c5dec7c11b4771e8a1fa98e759 没有问题

那个版本的 amis-editor-demo 依赖的是 "amis": "1.8.0", "amis-editor": "4.1.0-beta.4",

[rencoo]

fis3 起服务，走的是 node_modules/amis-core/lib/factory 就没问题，webpack dev走node_modules/amis-core/esm/factory 就报错

[hyzx86]

就因为这个问题。。迟迟没法上2.0 。。 跪求官方大佬解决

[rencoo]

临时解决方案： node_modules/amis-core/lib/factory.js 和 node_modules/amis-core/esm/factory.js 修改代码后，再打包可以解决该问题 ``javascript

// if (renderersMap[config.name]) {
//     throw new Error("The renderer with name \"".concat(config.name, "\" has already exists, please try another name!"));
// }
// else if (renderersMap.hasOwnProperty(config.name)) {
//     // 后面补充的
//     var idx_1 = helper.findIndex(renderers, function (item) { return item.name === config.name; });
//     ~idx_1 && renderers.splice(idx_1, 0, config);
// }
if (renderersMap.hasOwnProperty(config.name)) {
    // 后面补充的
    var idx_1 = helper.findIndex(renderers, function (item) { return item.name === config.name; });
    ~idx_1 && renderers.splice(idx_1, 0, config);
}

``

[hyzx86]

antdpro 中已解决~~ amis v2.2.0 编辑器 5.1.9

antdpro 5.2 更新config

  chainWebpack: function (config) {

    config.plugin('monaco').use(new MonacoWebpackPlugin())
    config.merge({
      resolve: {
        conditionNames: ['require', 'node']
      }
    })
  }

[rencoo]

antdpro 中已解决~~ amis v2.2.0 编辑器 5.1.9

antdpro 5.2 更新config

  chainWebpack: function (config) {

    config.plugin('monaco').use(new MonacoWebpackPlugin())
    config.merge({
      resolve: {
        conditionNames: ['require', 'node']
      }
    })
  }

我一个同事看了后，也反馈说这么处理。另外问一下，这和antdpro有啥关系？

[hyzx86]

antdpro 中已解决~~ amis v2.2.0 编辑器 5.1.9 antdpro 5.2 更新config

  chainWebpack: function (config) {

    config.plugin('monaco').use(new MonacoWebpackPlugin())
    config.merge({
      resolve: {
        conditionNames: ['require', 'node']
      }
    })
  }

我一个同事看了后，也反馈说这么处理。另外问一下，这和antdpro有啥关系？

因为umi 中只能这么改 webpack

[seantech2000]

antdpro 中已解决~~ amis v2.2.0 编辑器 5.1.9 antdpro 5.2 更新config

  chainWebpack: function (config) {

    config.plugin('monaco').use(new MonacoWebpackPlugin())
    config.merge({
      resolve: {
        conditionNames: ['require', 'node']
      }
    })
  }

我一个同事看了后，也反馈说这么处理。另外问一下，这和antdpro有啥关系？

因为umi 中只能这么改 webpack

根据这个并不能完全解决问题，第一次进入路由依然会这个错误，但是刷新页面又能正常渲染编辑器

[hyzx86]

上 antdpro 6.x 很多问题都不是问题了。。

[hyzx86]

别揪着旧版本不放了，amis 团队已经迭代了N个版本了

[seantech2000]

antdpro 6.x

你这个说的 antdpro 6.x跟这个有关系？同样问题 屡试不爽

[552088072]

我在umi中 添加了 这个配置 但是依然没解决这个问题 用的 "monaco-editor-webpack-plugin": "^7.0.1", 这个包 配置如下 chainWebpack: config => { config .module .rule("no-use-base64") .test(/no64/i) .use("file-loader") .loader("file-loader") .options({ name: "static/[name]-[hash:8].[ext]" })

    config.plugin('monaco').use(new MonacoWebpackPlugin()).merge({
        resolve: {
            conditionNames: ['require', 'node']
        }
    })
},

报错信息如下 Uncaught Error: The renderer with name "remark" has already exists, please try another name!

[hyzx86]

1. 看看 monaco-editor-webpack-plugin 这个 包的说明， 你很必要了解下它
2. remark 问题 回滚版本，一个个试
3. 参考官方示例。。最好不要用 umi了。。本来用它就是为了Layout ，但现在umi4 的layout 丑的一比。。还不如 amis 的单页面应用demo

[enkialtria]

webpack4应该怎么解决呀

[rencoo]

webpack4应该怎么解决呀

resolve: {
    // ...
    conditionNames: ['require', 'node']
},

[enkialtria]

写在这里么？ module.exports = { resolve: { conditionNames: ['require', 'node'] }, publicPath: process.env.NODE_ENV === "production" ? "/" : "/",

[enkialtria]

这样写报错了。。

[enkialtria]

这是我使用的js https://gitee.com/y_project/RuoYi-Vue/blob/master/ruoyi-ui/vue.config.js， 能帮我指点下应该怎么写么

[enkialtria]

链接上多了个逗号

[wibetter]

请使用amis-editor-demo最新版，目前已改为webpack打包方式，