javascript - "TypeError: can' t 将未定义转换为对象“仅在 vite 构建之后，之前，使用 vide dev，一切正常

Question

我将 Vite 与 React 和 Typescript 结合使用。当我运行 vite dev 时，网站的实时版本运行完美，甚至控制台上没有错误。

当我运行vite build然后运行vite Preview时，我看到的只是一个白色页面，并且类型错误:无法将未定义转换为对象控制台出现错误。

我无法追踪代码中的问题，因为错误发生在构建/最小化之后，但为了确定，我在调用 Object.keys() 的实例中添加了安全检查。

这是错误开始的代码段:

Object.keys(pd).forEach(function (e) {
  if (pd[e] === 0)
    Xd.prototype["on" + e] = function () {
      this.scope.emit(e);
    };
  else if (pd[e] === 1)
    Xd.prototype["on" + e] = function (t) {
      this.scope.emit(e, t);
    };
});

编辑:

我正在检查最小化的代码，就在错误所在的长代码块之前，我看到了一个 MuiTouchRipple。我正在使用 MaterialUI 库，该库是否可能导致此问题？我尝试从版本 5.4.2 更新到 5.6.3，但构建后仍然崩溃。

Answer 1

我设法修复了它。

为像我这样的新手发布调试步骤。

调试

1。禁用最小化

这可以让你看到原始代码，它仍然是捆绑形式，所以你仍然无法确定问题所在的确切文件，但至少你知道更多的东西。 (在我的具体情况下，因为我使用的是 vite，所以我必须更改配置文件中的变量，请参阅 https://vitejs.dev/config/#build-minify )。

2。更改 typescript 编译器选项

在我的例子中，目标和模块设置为 ESNext，尝试将其更改为 ES6 或 commonjs 有助于获得更好的可搜索代码。(参见https://www.tsmean.com/articles/learn-typescript/typescript-module-compiler-option/)

3。搜索导致错误的代码

当我尝试在 vscode 中搜索代码时，它没有出现。这是一个好兆头，至少我的代码没有引起问题!

但同时:现在怎么办？

我找到的解决方案是禁用 vscode 从搜索中排除的文件夹(默认情况下 vscode 不在 node_modules 中搜索)，或者在项目文件夹。我发现后者更快、更高效。

解决方案

在我的具体案例中，问题是一个多年没有更新的旧库( https://www.npmjs.com/package/react-html-parser )。一旦我删除它，一切就开始工作了。