如何解决基于vis.js构建的CJS/MJS双格式内部包导入后出现vis_network__WEBPACK_IMPORTED_MODULE_2__.DataSet不是构造函数的错误？

我之前也碰到过类似的vis.js模块导入与打包兼容问题，结合你同时输出CJS和MJS格式的场景，给你几个实用的排查和解决方向：

1. 检查打包工具的外部依赖配置 #

如果你的内部包是用Webpack、Rollup这类工具打包的，一定要确认是否将vis-data和vis-network标记为外部依赖（external）。如果把这些依赖直接打进你的包中，打包工具可能会重写它们的导出结构，导致DataSet的构造函数被意外封装或丢失。

以Webpack为例，在配置中添加：

module.exports = {
  // ...其他配置
  externals: {
    'vis-data': 'vis-data',
    'vis-network': 'vis-network'
  }
};

这样宿主项目会自己管理vis相关依赖，避免打包后的导出冲突。

2. 调整DataSet的导入路径与方式 #

不要从vis-network间接导入DataSet，直接从vis-data的对应模块入口导入，并且根据你的包格式选择合适的入口：

• 对于MJS格式：

  import { DataSet } from 'vis-data/peer/esm';
  

• 对于CJS格式：

  const { DataSet } = require('vis-data/peer/cjs');
  

vis-data的peer目录下的入口是专门为第三方包集成设计的，能更好地兼容不同模块规范。

3. 确保内部包的package.json导出配置正确 #

要同时支持CJS和MJS，必须在package.json中正确配置exports字段，让Node.js和打包工具能正确识别对应的模块文件：

{
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }
  },
  "type": "module" // 如果默认是ESM，或者反过来设为commonjs
}

这个配置能避免模块解析时出现混淆，确保宿主项目导入的是对应格式的包文件。

4. 排查重复依赖或版本冲突 #

有时候宿主项目和你的内部包各自安装了vis相关依赖，导致DataSet来自不同的模块实例，进而出现“不是构造函数”的错误。解决方法：

• 在内部包的package.json中，把vis-data和vis-network设为peerDependencies，强制宿主项目统一安装相同版本：

  "peerDependencies": {
    "vis-data": "^7.1.0",
    "vis-network": "^9.1.0"
  }
  

• 如果用Webpack，在宿主项目的配置中添加别名，强制指向同一个依赖实例：

  resolve: {
    alias: {
      'vis-data': path.resolve(__dirname, 'node_modules/vis-data'),
      'vis-network': path.resolve(__dirname, 'node_modules/vis-network')
    }
  }
  

5. 调试模块导出结构 #

在导入的地方临时添加日志，看看模块的实际导出内容：

import * as visNetwork from 'vis-network';
console.log('vis-network导出内容:', visNetwork);
import * as visData from 'vis-data';
console.log('vis-data导出内容:', visData);

有时候Webpack会把ESM模块转成CJS格式，导致默认导出被挂在default属性下，这时候你可能需要调整导入方式（比如visData.default.DataSet），先确认导出结构再做适配。

6. 直接使用vis-data的原生ESM/CJS文件 #

如果以上方法都无效，试试直接导入vis-data的编译后文件，绕开模块解析的问题：

// ESM
import { DataSet } from 'vis-data/dist/vis-data.esm.js';
// CJS
const { DataSet } = require('vis-data/dist/vis-data.cjs.js');

内容的提问来源于stack exchange，提问作者lmonninger