[Bug] webpack use plugin error `require is not defined`

[CitizensLi]

Prerequisites

• There isn't an existing issue that reports the same bug to avoid duplicates.

• The provided information offers a minimal reproducible example of the bug, (Why create a Minimal).

• For Q&A, please open a GitHub Discussion instead.

Version

v0.10.3

Reproduction Link

No response

Describe the Bug

按照官方文档：
import cherry from 'cherry';
import echarts from 'echarts';
import echartsEngine from 'cherry/dist/addons/advance/cherry-table-echarts-plugin';

cherry.usePlugin(echartsEngine , { echarts });
报错

先决条件：基于vue2.x，通过npm安装了cherry-markdown 0.10.3
引入：
import Cherry from "cherry-markdown";
import * as echarts from 'echarts';
import EChartsTableEngine from "cherry-markdown/dist/addons/advance/cherry-table-echarts-plugin";

使用：
在initConfig中（Cherry实例化之前）
Cherry.usePlugin(EChartsTableEngine,{echarts} )
报错：
vue-router.esm.js:2316 ReferenceError: require is not defined
at eval (cherry-table-echarts-plugin.js:2:1)
at ./node_modules/cherry-markdown/dist/addons/advance/cherry-table-echarts-plugin.js (src_views_writeview_ArticleWriteView_vue.js:62:1)
at webpack_require (index.js:1759:32)
at fn (index.js:2057:21)
at eval (index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/markdown/evan-cherry-editor.vue?vue&type=script&lang=js:14:121)
at ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/markdown/evan-cherry-editor.vue?vue&type=script&lang=js (src_views_writeview_ArticleWriteView_vue.js:40:1)
at webpack_require (index.js:1759:32)
at fn (index.js:2057:21)
at eval (evan-cherry-editor.vue?vue&type=script&lang=js:2:231)
at ./src/components/markdown/evan-cherry-editor.vue?vue&type=script&lang=js (src_views_writeview_ArticleWriteView_vue.js:159:1)
at webpack_require (index.js:1759:32)
at fn (index.js:2057:21)
at eval (evan-cherry-editor.vue:3:105)
at ./src/components/markdown/evan-cherry-editor.vue (src_views_writeview_ArticleWriteView_vue.js:148:1)
at webpack_require (index.js:1759:32)
at fn (index.js:2057:21)
at eval (index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/writeview/ArticleWriteView.vue?vue&type=script&lang=js:8:101)
at ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/writeview/ArticleWriteView.vue?vue&type=script&lang=js (src_views_writeview_ArticleWriteView_vue.js:51:1)
at webpack_require (index.js:1759:32)
at fn (index.js:2057:21)
at eval (ArticleWriteView.vue?vue&type=script&lang=js:2:229)
at ./src/views/writeview/ArticleWriteView.vue?vue&type=script&lang=js (src_views_writeview_ArticleWriteView_vue.js:237:1)
at webpack_require (index.js:1759:32)
at fn (index.js:2057:21)
at eval (ArticleWriteView.vue:3:103)
at ./src/views/writeview/ArticleWriteView.vue (src_views_writeview_ArticleWriteView_vue.js:226:1)
at webpack_require (index.js:1759:32)
at fn (index.js:2057:21)

如果在config中直接配置：
engine: {
global: {
flowSessionContext:true,
flowSessionCursor:'default',
},
syntax: {
inlineCode: {
selfClosing:true,
showColor:true,
},
table: {
enableChart: true, // 启用图表功能
chartRenderEngine: EChartsTableEngine,
externals: ['echarts'],
},

也会出现同样的错误

System Information

Contributing

None

[RSS1102]

能否提供一个复现代码呢，不知道你的 webpack 相关版本和配置

[sunsonliu]

或者可以试试这样行不行：

import cherry from 'cherry';
import echarts from 'echarts';
new Cherry({
  externals: {
    echarts,
  },
  engine: {
    syntax: {
      table: {
        enableChart: true,
      }
    }
  }
});

[CitizensLi]

@sunsonliu 按照你的引入后提示：
Error: table-echarts-plugin[init]: Package echarts not found.
at new t (cherry-markdown.esm.js:1:1)
at new t (cherry-markdown.esm.js:1:1)
at t.value (cherry-markdown.esm.js:1:1)
at eval (cherry-markdown.esm.js:1:1)
at Array.forEach ()
at t.value (cherry-markdown.esm.js:1:1)
at new t (cherry-markdown.esm.js:1:1)
at new t (cherry-markdown.esm.js:1:1)
at new t (cherry-markdown.esm.js:1:1)
at VueComponent.initEditor (evan-cherry-editor.vue:183:1)
at eval (evan-cherry-editor.vue:508:1)

[CitizensLi]

@RSS1102

webpack的配置：

const { defineConfig } = require('@vue/cli-service')
const packageInfo = require("./package.json")
module.exports = defineConfig({
publicPath: '/',
transpileDependencies: true,
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'GuideBook',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index'],
meta: {revised: 版本号, ${packageInfo.version}}
},
},
devServer: {
https: true, // 自动创建证书
headers: {
'Access-Control-Allow-Origin': '*',
},
port:8082,
proxy: {
}
}
})

完整的流程如下：

import Cherry from "cherry-markdown";
import echarts from 'echarts';
import EChartsTableEngine from 'cherry-markdown/dist/addons/advance/cherry-table-echarts-plugin';



export default{
      data(){
         return{
             editor:null
         }
      },
      methods: {
    initEditor(config) {
      let _this = this;
      let item = localStorage.getItem(LOCAL_STORAGE_KEY.addArticle(this.$store.getters.currentUser.userId));

      this.editor = new Cherry({
        ...config,
        id: 'document-content',
        value: item ? item : _this.inputValue,
      })
    },
    initConfig() {
      //Cherry.usePlugin(EChartsTableEngine, { echarts });
      let _this = this;
      let config = {
            externals: {
              echarts,
            },
            fileTypeLimitMap: {
              video: 'video/*',
              audio: 'audio/*',
              image: 'image/*',
              word: '.doc,.docx',
              pdf: '.pdf',
              file: '*',
            },
            multipleFileSelection: {
              video: false,
              audio: false,
              image: true,
              word: true,
              pdf: true,
              file: false,
            },
            callback: {
              afterInit: (text, html) => {

                if (_this.load) {

                  _this.load.text = '初始化完毕！';
                  setTimeout(() => {
                    _this.load.close();
                    _this.load = null;
                  }, 500)
                }
              },
              fileUpload: (file, callback) => {
                _this.$CF.uploadFile(file, UPLOAD_DIR.content.article).then(res => {
                    callback( res.Key?prefixURI+res.Key:'https://'+res.Location,  {isRadius: true});
                }).catch(cat => {
                  console.log('cat', cat);
                })

              },
              fileUploadMulti: (files, callback) => {
                const promises = [];
                for (const file of files) {

                  const promise = new Promise((resolve, reject) => {
                    this.$CF.uploadFile(file, UPLOAD_DIR.content.article).then(res => {
                      resolve(
                          res.Key?prefixURI+res.Key:'https://'+res.Location,  {isRadius: true}
                      );
                    })
                  });
                  promises.push(promise);
                }
                Promise.all(promises).then((results) => {
                  callback(results);
                });
              },
              beforeImageMounted: (srcProp, src) => ({srcProp, src}),
            },

            engine: {
              global: {
                flowSessionContext: true,
                flowSessionCursor: 'default',
              },
              syntax: {
                inlineCode: {
                  selfClosing: true,
                  showColor: true,
                },
                table: {
                  enableChart: true, // 启用图表功能
                  // chartRenderEngine: EChartsTableEngine,
                  // externals: ['echarts'],
                },
                image: {
                  videoWrapper: (link, type, defaultWrapper) => {
                    switch (type) {
                      case 'video':
                        const posterUrl = link.replaceAll('/c-m/', '/c-m/preview/') + '.webp';
                        return `<video src="${link}" poster="${posterUrl}" controlsList="nodownload noremoteplayback"   class=" cherry-img-deco-radius"  controls="controls"></video>`
                      default:
                        return defaultWrapper;
                    }
                  },
                },
                codeBlock: {
                  wrap: false,
                  lineNumber: true, // 默认显示行号
                  expandCode: true, // 当代码行数大于10行时，自动折叠代码块
                  copyCode: true, // 显示复制代码块的按钮
                  editCode: true, // 显示编辑代码块的按钮
                  changeLang: false, // 显示切换语言的按钮
                  selfClosing: true,
                  indentedCodeBlock: true,
                  customBtns: [],
                  customRenderer: {
                  },
                  wrapperRender: (language, code, innerHtml) => {
                    return processCherry.customCodeBlockContainer(language, code, innerHtml)
                  }
                },
                // ...其他语法配置
              }
            },
            editor: {
              defaultModel: _this.isPhone ? 'editOnly' : 'edit&preview',
              height: 'auto',              // 编辑器高度
              convertWhenPaste: true,       // 粘贴时自动转换HTML为Markdown
              keyMap: 'sublime',            // 快捷键风格
              codemirror: {
                autofocus: true,            // 自动聚焦
                placeholder: '开始写作...'  // 占位文本
              },
              writingStyle: 'normal',       // 书写风格
              showFullWidthMark: true,      // 高亮全角符号
              showSuggestList: true,        // 显示输入联想
              maxUrlLength: -1              // URL最大长度（无限制）
            },
            toolbars: {
              customMenu: {
                styleMenu: Cherry.createMenuHook('样式', {iconName: ''})
              },
              showToolbar: true, // false：不展示顶部工具栏； true：展示工具栏; toolbars.showToolbar=false 与 toolbars.toolbar=false 等效
              toolbar: _this.autoHeaderToolbarConfig,
              toolbarRight: [],
              sidebar: false,//侧边栏
              bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', '|', 'size', 'color'], // array or false
              float: ['h1', 'h2', 'h3', '|', 'checklist', 'quote', 'table', 'code'], // array or false
              hiddenToolbar: [], // 不展示在编辑器中的工具栏，只使用工具栏的api和快捷键功能
              toc: {
                updateLocationHash: true, // 要不要更新URL的hash
                showAutoNumber: true, // 是否显示自增序号
                defaultModel: 'pure', // pure: 精简模式/缩略模式，只有一排小点； full: 完整模式，会展示所有标题
                //   position: 'absolute', // 悬浮目录的悬浮方式。当滚动条在cherry内部时，用absolute；当滚动条在cherry外部时，用fixed
                //   cssText: '', // 自定义样式
              }, // 展示悬浮目录
            },
            nameSpace: 'cherry-test',
            // ================= 主题与国际化 =================
            themeSettings: {
              themeList: [                   // 可用主题列表
                {className: 'default', label: '默认'},
                {className: 'dark', label: '黑'},
                {className: 'light', label: '白'},
                {className: 'green', label: '绿'},
                {className: 'red', label: '粉'},
                {className: 'violet', label: '紫'},
                {className: 'blue', label: '蓝'},
                {className: 'auto', label: '自适应'},
              ],
              mainTheme: 'auto',          // 主主题
              codeBlockTheme: 'vs-dark',        // 代码块主题
              //inlineCodeTheme: 'red'         // 行内代码主题
            },
            locale: 'zh_CN',                 // 中文界面
            autoScrollByHashAfterInit: true    // cherry初始化后是否检查 location.hash 尝试滚动到对应位置
          }
        this.load.text = '初始化编辑器';
        this.initEditor(config);
    },



}

我已经尝试了Cherry.usePlugin(EChartsTableEngine, { echarts });会报错
也尝试了 externals: {
echarts,
},，会出现警告echarts未找到

[RSS1102]

你可以先使用预览包

npm i https://pkg.pr.new/cherry-markdown@1565

参考 https://github.com/RSS1102/cherry-markdown-vue2-webpack