开发者问题收集

仅在 vite build 之后出现“TypeError: can't convert undefined to object”,之前使用 vide dev 时一切正常

2022-04-26
2569

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

当我运行 vite build 然后运行 ​​ vite preview 时,我所看到的只是一个白页和控制台中的 TypeError: can't convert undefined to object 错误。

我无法在代码中追踪问题,因为错误发生在构建/最小化之后,但为了确保万无一失,我在调用 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,但构建后它仍然崩溃。

在此处输入图片描述

3个回答

我设法修复了它。

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

调试

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 中搜索),或者在项目文件夹中使用 grep -r 。 我发现后者更快、更高效。

解决方案

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

Berenluth
2022-04-28

我遇到了类似的问题,对我来说,这是由 tsconfig.json 中的 "target": "es5" 引起的。

更改为 esnext 后,问题消失。

https://esbuild.github.io/content-types/#es5

partizan
2022-07-11

我遇到了类似的问题。对我来说,我需要删除 vite.config.ts 中的 build.lib.formats 设置。

Boldewyn
2023-01-03