仅在 vite build 之后出现“TypeError: can't convert undefined to object”,之前使用 vide dev 时一切正常
我将 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,但构建后它仍然崩溃。
我设法修复了它。
为像我这样的新手发布调试步骤。
调试
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 )。一旦我删除它,一切就开始正常工作了。
我遇到了类似的问题,对我来说,这是由 tsconfig.json 中的
"target": "es5"
引起的。
更改为
esnext
后,问题消失。
我遇到了类似的问题。对我来说,我需要删除
vite.config.ts
中的
build.lib.formats
设置。