CODEWITHSUNDEEP
javascriptreactjstypescriptmaterial-uivite
Berenluth
Berenluth

Reputation: 520

"TypeError: can't convert undefined to object" only after vite build, before, with vide dev, everything works perfectly

I'm using Vite combined with React and Typescript. When I run vite dev the live version of the website runs perfectly, not even errors on the console.

When I run vite build and then vite preview all I get to see is a white page and the TypeError: can't convert undefined to object error in the console.

I cannot trace the problem in my code because the error happens after the build/minimization, but just to be sure, I added safety checks in the instances where I call Object.keys().

This is the segment of the code where the error starts:

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);
    };
});

Edit:

I was checking the minimized code and right before the long block of code where the bug is, I saw a MuiTouchRipple. I'm using the MaterialUI library, is it possible that the library is causing this problem? I tried to update from version 5.4.2 to 5.6.3, but after the build it still crashes.

enter image description here

Upvotes: 3

Views: 3203

Answers (3)

Boldewyn
Boldewyn

Reputation: 82804

I had a similar problem. For me it was the build.lib.formats setting in vite.config.ts, that I needed to remove.

Upvotes: 0

partizan
partizan

Reputation: 337

I had similar problem, and for me this was caused by "target": "es5" in tsconfig.json.

After changing to esnext, problem is gone.

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

Upvotes: 1

Berenluth
Berenluth

Reputation: 520

I managed to fix it.

Posting the debug steps for the newbies like me.

Debug

1. Disable minimization

This allows you to see the original code, it's still in a bundled form, so you still cannot identify the exact file where the problem is, but at least you know something more. (in my specific case, since I'm using vite I had to change a variable in the config file, see https://vitejs.dev/config/#build-minify).

2. Change typescript compiler options

In my case the target and module were set to ESNext, trying to change it to ES6 or to commonjs helped to have a better searchable code. (see https://www.tsmean.com/articles/learn-typescript/typescript-module-compiler-option/)

3. Search the code that causes the error

When I tried to search the code in vscode it did not appear. That's a good sign, at least my code was not causing the problem!

But at the same time: what now?

The solution I found is to either disable vscode excluded folders from the search (by default vscode does not search in node_modules), or to use grep -r in the project folder. I found the latter to be faster and more efficient.

Solution

In my specific case the problem was an old library that hasn't been updated in years (https://www.npmjs.com/package/react-html-parser). Once I removed it everything started working.

Upvotes: 4

Related Questions