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

背景

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

原因

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

1. 环境差异：

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

2. 代码错误：

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

3. 使用第三方库或框架：

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

4. Webpack 或其他模块打包器：

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

5. Node.js 版本：

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

6. 代码隔离：

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

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

解决方式

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

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