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.

TestCafe Runner.run(runOptions) never returns, browser hangs (Firefox & Chrome)

I've got a little sandbox project I've been playing around with for the last few weeks to learn the in's and out's of implementing a TestCafe runner.
I've managed to solve all my problems except one and at this point I've tried everything I can think of.
Reviewed the following similar questions:
How to close testcafe runner
How to get the testCafe exit code
But still my problem remains.
I've toyed around with my argv.json file.
I've toyed around with my CICDtestBranches.json file.
I've toyed around with my package.json file.
I've tested the same branch that has the problem on multiple
machines.
I've tested with multiple browsers (Firefox & Chrome) -
both produce the same problem.
I've tried to re-arrange the code, see
below
I've tried add multiple tests in a fixture and added a page
navigation to each one.
I've tried to remove code that is processing
irrelevant options like video logs & concurrency (parallel execution)
I also talked with some coworkers around the office who have done similar projects and asked them what they did to fix the problem. I tried their recommendations, and even re-arranging things according to what they tried and still no joy.
I've read through the TestCafe documentation on how to implement a test runner several times and still I haven't been able to find any specific information about how to solve a problem with the browser not closing at the end of the test/fixture/script run.
I did find a few bugs that describe similar behavior, but all of those bugs have been fixed and the remaining bugs are specific to either Firefox or Safari. In my case the problem is with both Chrome & Firefox. I am running TestCafe 1.4.2. I don't want to file a bug with TestCafe unless it really is a confirmed bug and there is nothing else that can be done to solve it.
So I know others have had this same problem since my coworker said he faced the same problem with his implementation.
Since I know I am out of options at this point, I'm posting the question here in the hopes that someone will have a solution. Thank you for taking the time to look over my problem.
When executing the below code, after the return returnData; is executed, the .then statement is never executed so the TestCafe command and browser window are never terminated.
FYI the following code is CommonJS implemented with pure NodeJS NOT ES6 since this is the code that starts TestCafe (app.js) and not the script code.
...**Boiler Plate testcafe.createRunner() Code**...
console.log('Starting test');
var returnData = tcRunner.run(runOptions);
console.log('Done running tests');
return returnData;
})
.then(failed => {
console.log(`Test finished with ${failed} failures`);
exitCode = failed;
if (argv.upload) return upload(jsonReporterName);
else return 0;
testcafe.close();
process.exit(exitCode);
})
.then(() => {
console.log('Killing TestCafe');
testcafe.close();
process.exit(exitCode);
});
I've tried to swap around the two final .then statements to try and see if having one before the other will cause it to close. I copied the testcafe.close() and process.exit() and put them after the if-else statement in the then-failed block, although I know they might-should not get called because of the if-else return statements just before that.
I've tried moving those close and exit statements before the if-else returns just to see if that might solve it.
I know there are a lot of other factors that could play into this scenario, like I said I played around with the runOptions:
const runOptions = {
// Testcafe run options, see: https://devexpress.github.io/testcafe/documentation/using-testcafe/programming-interface/runner.html#run
skipJSErrors: true,
quarantineMode: true,
selectorTimeout: 50000,
assertionTimeout: 7000,
speed: 0.01
};
Best way I can say to access this problem and project and all of the code would be to clone the git lab repo:
> git clone "https://github.com/SethEden/CAFfeinated.git"
Then checkout the branch that I have been working this problem with: master
You will need to create an environment variable on your system to tell the framework what sub-path it should work with for the test site configuration system.
CAFFEINATED_TEST_SITE_NAME value: SethEden
You'll need to do a few other commands:
> npm install
> npm link
Then execute the command to run all the tests (just 1 for now)
> CAFfeinated
The output should look something like this:
$ CAFfeinated
Starting test
Done running tests
Running tests in:
- Chrome 76.0.3809 / Windows 10.0.0
LodPage
Got into the setup Test
Got to the end of the test1, see if it gets here and then the test is still running?
√ LodPage
At this point the browser will still be spinning, and the command line is still busy. You can see from the console output above that the "Done running tests" console log has been output and the test/fixture should be done since the "Got to the end of the test1,..." console log has also been executed, that is run as part of the test.after(...). So the next thing to execute should be in the app.js with the .then(()) call.....but it's not. What gives? Any ideas?
I'm looking for what specifically will solve this problem, not just so that I can solve it, but so others don't run into the same pitfall in the future. There must be some magic sauce that I am missing that is probably very obvious to others, but not so obvious to me or others who are relatively new to JavaScript & NodeJS & ES6 & TestCafe.

The problem occurs because you specified the wrong value for the runner.src() method.

The cause of the issue is in your custom reporter. I removed your reporter and now it works correctly. Please try this approach and recheck your reporter.

React Native Image Resizer package receiving null when doing resize on iOS

I'm using the package react-native-image-resizer for image resize and optimization. The android platform is working well, but in iOS I'm getting null when calling the function.
I've done already, package re-install, re-link, version-downgrade, deleting node_modules and I don't know what else to do. I'm losing my mind. The codebase works excellent on Android but on iOS doesn't. The package is supposed to work on both platforms.
Ok, so my code pretty much goes like this, just as in the package tutorial:
ImageResizer.createResizedImage(data.uri, 800, 600, 'JPEG', 80);
Ive deleted the '.then' part of the code to see the yellow debug box on the phone. It prints a null is not an object right in the method call.
data.uri is my path, it prints the following format:
file:///var/mobile/Containers/Data/Application/02CF62B9-2372-40E9-BC3B-3CA18C/Library/Caches/Camera/C327A9AC-49A4-A5BF-21313CEC14E4.jpg
I don't really see where the null is.
I just want the issue to go away, I've deleted some lines of code inside the method, expecting this to work, but just with calling the method, it does not.

The null error is occurring when it evaluates the function createResizedImage.
If you've just installed the Resizer package, make sure you have run pod install in your ios directory, and you need to close and restart the server/simulator otherwise you will see this error.

Ok, so found the solution which is weird. I created the same project with all global and local dependencies up to date. When I say the same project, I mean the same .js files. That was it, the project now fully works with android and iOS.

Cassette.AssetReferenceException: Reference error in "~/Scripts/this.js", line 1. Cannot find "~/Scripts/jquery-1.7.1.js"

I cloned a git repo but have been unable to run the program due to the runtime error "Cassette.AssetReferenceException: Server Error in '/' Application. Reference error in "~/Scripts/this.js", line 1. Cannot find "~/Scripts/jquery-1.7.1.js". "
At line 1 in this.js I have: /// reference path = "~/Scripts/jquery-1.7.1" / (the opening and closing brackets are included but if I add them here, it deletes my reference path)
I have Typscript for VS installed, the correct Cassette version, jquery-1.7.1 IS in the scripts folder. I've tried uninstalling and reinstalling VS.... I have no compiling errors in VS. I've recloned the repo a hundred times. I KNOW this repo is good because it works on another persons computer. So its definitely something with my setup and cassette. If I delete all the cassette references, my page loads (not properly, but I don't get anymore errors.)
I'm a little lost here. Has anyone ran into this before?

After hours of looking I figured it out.
2 things:
Even after I uninstalled and reinstalled Cassette, for some reason, only the references for Cassette and Cassette.View were loading in my project. I had to manually brows for and add the reference for Cassette.Web.
Second thing is that in the _layout.cshtml file, I had to reference my jquery file like this:
#{ Bundles.Reference("Scripts/jquery-1.7.1.js"); }
INSTEAD OF
#{ Bundles.Reference("Scripts"); }
IDK why but it works now. someone else mentioned they had to something like that, too.

GWAN is modifying jquery.min.js to error

I am doing an experimental HTML template wich comes with jquery.min.js file - one of the most popular javascript libraries.
When I load the template from my local hard drive it works fine.
When I upload it and load it from server (GWAN) I get error (I think is not the only one) in Chrome looks like this:
Uncaught SyntaxError: Unexpected token { jquery.min.js:3
I inspected a bit and realized there is a
function $
which was turned into
function$
by GWan. The space removed is causing an error in Chrome, Firefox and Safari. I haven't tested other browsers but my IDE also reports a syntax error in the downloaded from GWAN version of the JS file.
I have also tried uploading the files to another server (Apache) and no problem there. The js file was not modified...
Any clues on how to get over this? I suppose there is a bug in javascript on-the-fly optimization of GWan?
Thanks.

It's a known issue and it will be fixed in next release (soon)
You'll be able to disable minifying directly from a init.c script in G-WAN v4.10+, this way:
u8 *www_mini = (u8*)get_env(argv, USE_MINIFYING);
if(www_mini)
{
*www_mini = 0;
puts("> disable minifying");
}
You just have to wait for few days for the new v5 release.