We Keep Coding

"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.

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.

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

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

Emscripten: 'undefined symbol' when calling JavaScript from C/C++; ERROR_ON_UNDEFINED_SYMBOLS does not work

Actually I've two questions, because the common workaround for my initial problem does not work :)
I'm trying to build an Emscripten based library which calls JavaScript functions as described here: https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#implement-a-c-api-in-javascript
Simply put I just implement my C/C++ code against a C-Function, implement that function in a .js file and 'link' that file using --js-library.
Basically things are working for me except with version EMSDK version 1.38.12 I got a warning when linking the final library:
warning: undefined symbol: foo_
.. which I don't understand but I could just ignore it. In newer versions of EMSDK the behavior changed and the warnings become errors.
Searching for this error you find you can just add -s ERROR_ON_UNDEFINED_SYMBOLS=0 when linking, but this doesn't work (for me) - I still get this error despite I can see this option being added to the linker.
So my questions are:
how do I make -s ERROR_ON_UNDEFINED_SYMBOLS=0 work for me?
and why do I get this warning in the first place? how do I get rid of it?

VSCode always shows type definition and not the actually implementation

do any of you face this problem , where vscode always take you to the type definition of a function and not the implementation.
For example,
I right click on the react setState function as below,
And VS code shows me the typescript file.
If its problem a, how do i fix it.
If not then how do I look at the implementation and not the type definition of a function.

This is a limitation of VS Code's intellisense. We don't attempt to parse js from inside node_modules for IntelliSense, so we have no way of mapping back to the original source code. Instead we rely on *.d.ts to provide definitions.
These two issues are tracking possible improvements to this:
https://github.com/Microsoft/TypeScript/issues/6209
https://github.com/Microsoft/TypeScript/issues/16792

In vscode v1.67 there is update with new Go to Source Definition command
Jump directly to a JavaScript implementation of a library function
using the new Go to Source Definition command. You can learn more
about this feature and share feedback in TypeScript issue #49003.

Meteor with hammer:hammer package: The Hammer variable exists, but is undefined

I am trying to add touch support to my meteor application. I added the package hammer:hammer. It stuffs a hammer_hammer.js file into the document, and creates a variable named Hammer. The problem is, the value of this variable is undefined.
The docs for Hammer.js claim I should just include the library, which Meteor does for me, and start using it like this:
var hammertime = new Hammer(element, options);
Obviously, this fails when Hammer is undefined. Is there something else I have to do to use it? Is it a bug in Hammer? Or in the hammer:hammer package?
Note that the variable Hammer exists, but has the value undefined.
Edit: I tried copying the entire contents of hammer_hammer.js into the console, and it actually made it work. Of course, I can't keep doing this every time, nor tell the users to do it.

The Hammer package may not have been published to atmosphere properly.
I investigated the package through source and it looks like the file package.js contains an unnecessary api.export("Hammer"); (since this is already exported by the window). Meteor seems to override the definition with null
Looking at it this can be either a bug in Meteor (since its overriding the variable) or an incorrectly published package (for declaring the export). You may want to get in touch with the guys over at Hammerjs who publish it to ask them to remove the api.export("Hammer");
Updated: Tracked down the issue to https://github.com/hammerjs/hammer.js/issues/741

Bower components and Codekit 2

I have recently been getting into using CodeKit, and now version 2 is out, which is what this question regards. There seems to be great potential in using the bower components installer; however, there is little to no documentation on the working relationship between CodeKit and bower components. My code follows as:
// #codekit-prepend "../bower_components/jquery/dist/jquery.js"
// #codekit-prepend "../bower_components/PhysicsJS/dist/physicsjs-full-0.6.0.js"
Physics(function(world){
// code straight out of the example online from the bottom of http://wellcaffeinated.net/PhysicsJS/basic-usage
});
Then I get 'Physics' is not defined. errors on any reference. This is one example but I seem to always get stuck at this point and I'm wondering: Is there a working way to use prepended libraries through CodeKit's bower components integration?

It seems as though I forgot something quite simple. It took me hours to figure out that simply adding $(document).ready(function(){ at the beginning and closing those tags at the end fixed the problem. Not sure exactly how that works if the libraries are in the same file but I guess it adds a little delay to the execution of the code, allowing the libraries to be considered for the code that follows.