解决三方包引入 global is not defined 报错问题

0背景

最近在开发关系图谱，使用 react-graph-vis 插件，按照文档引入，关系图谱报错：global is not defined。查找引用是因为 var crypto = global.crypto || global.msCrypto; // for IE 11。

1原因

在 JavaScript 或其他类似环境中，如果你遇到了 "global is not defined" 的错误，这通常意味着在你的代码上下文中，global 这个对象或变量没有被定义或识别。这个错误的原因可能有几个：

环境差异

在 Node.js 环境中，global 是一个内置的全局对象，你可以通过它访问全局变量。但是，如果你在浏览器环境中运行相同的代码，global 就不会被定义，因为浏览器全局对象是 window。如果你在尝试在浏览器中使用 global，你应该将其替换为 window。

代码错误

如果你的代码是在 Node.js 环境中运行，但 global 仍然报错，可能是因为某些代码或模块错误地覆盖了 global 对象或将其删除。检查是否有任何代码行（如 var global = ... 或 let global = ...）错误地声明了 global 变量，这可能会覆盖 Node.js 中的全局 global 对象。

使用第三方库或框架

如果你在使用某些第三方库或框架，并且它们内部使用了 global，而这些库或框架并不兼容你当前的环境（比如它们在浏览器环境中被错误地引入），那么也可能会出现这个错误。检查这些库或框架的文档，确认它们是否支持你的运行环境。

Webpack 或其他模块打包器

如果你在使用 Webpack、Rollup 或其他 JavaScript 模块打包器，并且你的配置可能影响了全局对象的处理，这也可能是问题所在。检查你的打包器配置，看看是否有任何与全局对象相关的设置。

Node.js 版本

在非常旧的 Node.js 版本中，可能存在对全局对象的处理与当前实践不一致的情况。尝试更新你的 Node.js 到最新版本，看看问题是否仍然存在。

代码隔离

如果你的代码被封装在严格模式下（strict mode），并且你试图在没有明确声明的情况下访问全局对象，这也可能导致问题。在严格模式下，未声明的变量访问会抛出错误。确保在访问全局对象之前，你了解当前的环境和上下文。

解决这个问题的方法通常取决于你的具体环境和代码。如果你正在 Node.js 环境中工作，确保你没有错误地声明或覆盖 global 对象。如果你在浏览器环境中工作，请考虑使用 window 代替 global。如果问题仍然存在，请检查你的代码和所使用的库或框架的文档。

2解决方式

按照 vite 搭建项目为例，我们采用最简单的解决方式：改变 global 对象即可。在打包入口文件 index.html 增加代码：

<script>
  if (window.global === undefined) {
    window.global = window;
  }
</script>