开发Jupyter Notebook扩展引入mermaid包报错及webpack打包问题求助

我仔细看了你的问题和仓库代码，这个错误的核心原因是lodash版本冲突：Jupyter Notebook本身自带的lodash版本比较老旧（大概率是v3.x系列），而_.constant是lodash v4.x才新增的方法。mermaid依赖的graphlibrary库用到了这个方法，运行时会优先调用Jupyter全局注入的旧版lodash，导致找不到该方法报错。

下面是具体的解决步骤：

1. 安装完整的新版lodash #

首先在你的项目目录下安装最新版的lodash，作为项目依赖：

npm install lodash --save

2. 修改webpack配置，强制使用本地lodash #

编辑webpack.config.js，添加别名和ProvidePlugin配置，让所有模块都使用你本地安装的新版lodash，而不是Jupyter全局的旧版：

const webpack = require('webpack');

module.exports = {
  // 保留你原有的entry、output等配置...
  resolve: {
    alias: {
      // 强制所有对lodash的引用指向本地安装的版本
      'lodash': require.resolve('lodash')
    }
  },
  plugins: [
    // 自动为模块注入lodash，避免依赖全局的_变量
    new webpack.ProvidePlugin({
      _: 'lodash'
    })
  ]
};

3. 调整main.js的引入逻辑 #

确保你在main.js里正确引入mermaid，比如：

import * as mermaid from 'mermaid';

// 初始化mermaid（根据你的需求配置参数）
mermaid.initialize({ startOnLoad: false });

// 后续编写你的扩展逻辑，比如监听单元格变化、渲染mermaid代码等

4. 重新打包并测试 #

执行打包命令重新构建扩展：

npm run build

然后按照Jupyter扩展的安装流程重新安装扩展，重启Jupyter Notebook后测试mermaid渲染功能，应该就能解决这个报错了。

补充说明 #

这个方案的核心是隔离Jupyter全局的旧版lodash，让你的扩展完全使用自己打包的新版lodash，避免版本冲突导致的方法缺失问题。如果后续还有类似的第三方库依赖冲突，都可以用类似的webpack别名+ProvidePlugin的方式解决。

内容的提问来源于stack exchange，提问作者Honghe.Wu