javascript - "TypeError: kan inte konvertera undefined till objekt" endast efter vite build, innan, med vite dev, fungerar allt perfekt

Jag använder Vite tillsammans med React och Typescript. När jag kör vite dev fungerar den live versionen av webbplatsen perfekt, inte ens några fel i konsolen.

När jag kör vite build och sedan vite preview ser jag bara en vit sida och felet TypeError: kan inte konvertera undefined till objekt i konsolen.

Jag kan inte spåra problemet i min kod eftersom felet uppstår efter byggandet/minimeringen, men för att vara säker lade jag till säkerhetskontroller i de instanser där jag anropar Object.keys().

Detta är den del av koden där felet börjar:

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

Redigera :

Jag kollade den minimerade koden och precis innan det långa kodblocket där felet är, såg jag en MuiTouchRipple. Jag använder MaterialUI-biblioteket, är det möjligt att biblioteket orsakar det här problemet? Jag försökte uppdatera från version 5.4.2 till 5.6.3, men efter byggandet kraschar det fortfarande.

Svar #1

Jag lyckades fixa det.

Publicerar felsökningsstegen för nybörjarna som jag.

Felsök

1. Inaktivera minimering

Detta låter dig se den ursprungliga koden, den är fortfarande i ett sammanslaget format, så du kan fortfarande inte identifiera den exakta filen där problemet finns, men åtminstone vet du lite mer. (i mitt specifika fall, eftersom jag använder Vite, var jag tvungen att ändra en variabel i konfigurationsfilen, se https://vitejs.dev/config/#build-minify).

2. Ändra TypeScript-kompilatoralternativ

I mitt fall var target och modul inställda på ESNext, att försöka ändra det till ES6 eller till commonjs hjälpte för att få en bättre sökbar kod. (se https://www.tsmean.com/articles/learn-typescript/typescript-module-compiler-option/)

3. Sök efter koden som orsakar felet

När jag försökte söka efter koden i vscode dök den inte upp. Det är ett gott tecken, åtminstone var det inte min kod som orsakade problemet!

Men samtidigt: vad nu?

Lösningen jag hittade är antingen att inaktivera vscode exkluderade mappar från sökningen (som standard söker inte vscode i node_modules), eller att använda grep -r i projektmappen. Jag fann att det senare är snabbare och mer effektivt.

Lösning

I mitt specifika fall var problemet ett gammalt bibliotek som inte har uppdaterats på flera år (https://www.npmjs.com/package/react-html-parser). När jag tog bort det började allt fungera.

Svar #2

Jag hade ett liknande problem, och för mig orsakades detta av "target": "es5" i tsconfig.json.

Efter att ha bytt till esnext är problemet borta.

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

Relaterade artiklar