reactjs “类型错误:无法将未定义的转换为对象”仅在vite构建后,之前,使用vide dev,一切工作正常

kgsdhlau  于 2023-01-04  发布在  React
关注(0)|答案(3)|浏览(109)

我使用的是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,但在构建后仍然崩溃。

ozxc1zmp

ozxc1zmp1#

我想办法修好了。
为像我这样的新手发布调试步骤。

调试

1.禁用最小化

这使您可以看到原始代码,它仍然是捆绑的形式,所以您仍然不能确定问题所在的确切文件,但至少您知道了更多的东西。(在我的特定情况下,由于我使用的是vite,我不得不更改配置文件中的一个变量,请参见https://vitejs.dev/config/#build-minify)。

2.更改类型脚本编译器选项

在我的例子中,目标和模块被设置为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)。一旦我删除了它,一切都开始工作了。

pengsaosao

pengsaosao2#

我遇到过类似的问题,对我来说,这是由tsconfig.json中的"target": "es5"引起的。
更换为esnext后,问题消失。
https://esbuild.github.io/content-types/#es5

k4emjkb1

k4emjkb13#

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

相关问题