Prevent React JS from overriding scripts - javascript

I'm not that experienced with JavaScript, however, I am familiar enough to navigate and write my own code.
I've been spending a lot of time trying to figure out an issue I'm getting with HTTP requests, only to recently realize that it's likely a specific script other that might causing this.
It looks as though it may be React JS.
I'm not familiar with this.
(I did look it up, and searched a lot for any no-conflict options)
Basically, from the moment I execute "XMLHttpRequest.prototype.open" to monitor incoming HTTP requests, all of my scripts appear to be passing through a React JS file.
I assume this, because I'm logging the steps and results of my script in the browser's console, and they are all being attributed to "commons-##########.js" from the moment I run that XMLHttpRequest.prototype.
I see this in the header of the commons-##########.js file:
/** #license React v16.4.1
* react-dom.production.min.js
*
* Copyright (c) 2013-present, Facebook, Inc.
The problem is that it appears to be affecting my own scripts from functioning properly.
Does anyone know why this might happen, and how it could be fixed?
I'd like my JS scripts to run without interference from React JS.
(It's not my own website, but a website I regularly use for business. The modifications are to assist me, nothing malicious.)
Thank you.
Please note that I'm aware that the commented portion I highlighted will not affect my code. I only put that to explain why I believe it's a React JS script that is causing the problem.
This is what the actual error looks like in the console (a portion of it):
Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at XMLHttpRequest.<anonymous> (<anonymous>:122:29)
at XMLHttpRequest.a (commons-9702d5b….js:34)
(anonymous) # VM14804:122
a # commons-9702d5b….js:34
XMLHttpRequest.send (async)
XMLHttpRequest.send # VM14804:70
(anonymous) # commons-9702d5b….js:34
(anonymous) # commons-9702d5b….js:34
I've tried many methods, and I don't see any issue with why I cannot JSON parse the response, or do many other things.
Something about that code is interfering with my own.
The JS script is a long, minified file, so it would be difficult to pin down a lone offending portion of code.

I'm 99.99% sure the problem isn't with React. The commons-#.js file is the result of your scripts being bundled with any 3rd party libraries you're using (like React) into one file for efficient loading from a web server - it's standard practice, and very unlikely to cause any issues. The /** #license React v16.4.1 comment you're seeing at the top of the file is simply because the bundling process has been configured to retain license information in the output.

The problem is caused by JSON response that was received in wrong form from a server or was incorrectly transformed.
Unexpected token o in JSON at position 1
error means that [object ...] string (the result of coercion of an object to a string) was passed to JSON.parse. It's unknown where this error originates from. XHR requests can be checked in devtools Network tab to identify whether the problem was caused by wrong response, so it could be reported to API owner.
The problem isn't caused by React. React itself can't do anything like that, it's UI library. It doesn't use XMLHttpRequest in any way. The error is caused by some piece of code that uses both React and XHR. It likely can be debugged in this part of a stack:
at XMLHttpRequest.<anonymous> (<anonymous>:122:29)
at XMLHttpRequest.a (commons-9702d5b….js:34)
(anonymous) # VM14804:122
The problem needs to be fixed by a party this code belongs to - website owner, another browser extension, third-party components you're using, etc.

Related

Issue with Google Tag Manager implementation. "Uncaught TypeError: Wb.set is not a function"

Recently I started having Issues with the Google Tag Manager.
I can't track it to a Tag or a Trigger (activated and deactivated individually to check).
The error started occurring this week (no updates were made to the system or template). I noticed when testing the implementation of a new Tag in GTM. That shortly worked but then this error message started showing in the console. Removing the new Tag didn't change the situation and since the code worked for a while (some 30minutes) I don't expect a direct relationship between the new tag and the error.
All I have is the console in the frontend that shows the following error message:
Uncaught TypeError: Wb.set is not a function
The error stems from this file:
https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX
Wb is started as a Map just a few steps earlier:
Wb=new Map(Vb.h.F);
Wb.set("style",{ya:4});
The GTM Script is copied and pasted from the GTM-Admin without any change made to it and is included in the header.php file of the Wordpress template. I tried copying it again and replacing the script that was in the header.php previously but the result was the same.
If looking at the actual error message in the console helps, the issue can be seen on the following URL:
https://www.bindella.ch
Any help in solving this or at least pointer to where to go look for errors would be very much appreciated.
Thanks
Very interesting, and yes, you're right, the error in the minified code makes no sense:
Let's try something different. First, just export your GTM container (the workspace that is synced with prod/live) as a JSON file in Admin section.
Open the file, look for something like set("style" See if you can find that Wb. Well, don't expect it to be Wb. I guess GTM minifies the code. It may be some weird chat bot, or something like that. From there, you'll be able to find the tag or variable that causes the issue.
I didn't look too deep into it, but that part of code looks sophisticated enough to be a part of the core container code. Actually, we can check it right here, on SO cuz it uses GTM too, let's do that.
Yes, SO has identical code. Looks like it's indeed core GTM. Well, there's a tiny probability that when you built the prod library last time, GTM had an issue and it deployed an artefact.
Try making a new workspace, make a nonsensical change in it and publish it to production. See if it lets you publish. Then see if that fixes the issue.
Now, if it doesn't then the next thing I'd try is trying to re-importing the exported JSON, forcing GTM compare the import to what's there and find differences.
Now if that shows no issues, then I would make a brand new container, load the config in it and try replacing the gtm loading script to see if the error still happens. It sounds like you can do that. If you can't, look a plugin like redirector to redirect the request to a different container.
Still the error with the new container? How about if you load a completely empty container? Got any errors?
There's a very slim chance that your front-end deploys one of a few vars GTM uses too, thus conflicting with your GTM. But it's very unlikely. Why would you use something like google_tag_manager or google_tag_data in the global scope...
If nothing helps and only the empty container doesn't give errors, then... well, then make a list of all tags firing along that error and start disabling them one by one. Or use breakpoints to narrow it down to the tag/library that causes it.

Custom Module in SuiteScript 2.0

I have a JavaScript library file that I use throughout my scripts when creating SuiteScripts for NetSuite. I'm trying to get myself all prepped on 2.0 and start pushing new projects to it and get away from SuiteScript 1.0. So, I transcribed my library file into 2.0. However, whenever I create a new script and have my library referenced, I always get the following message:
SuiteScript 2.0 entry point scripts must implement one script type function.
But, if I remove the reference from the script, it lets me load it up and create the script record. Then I can put the reference back and upload the revised script file without issue. I can't for the life of me understand why this happens. If it matters, here is the JSDoc header in the file:
/**
* my.library.v2.js
* #NApiVersion 2.x
* #NModuleScope Public
*/
A script would also start off like this after its own JSDoc header:
define(['N/error', 'N/record', 'N/runtime', 'N/search', './my.library.v2'],
function(error, record, runtime, search, myLib) {
function doStuff(context) { /* do a bunch of stuff */ }
return { pageInit : doStuff };
});
Along the same issue, I also have trouble with running some scripts. Everything works perfectly when applying this module to client scripts once I get beyond the previously mentioned issue. However, I cannot successfully get a server-side script to initiate with the library. I constantly get this error:
com.netsuite.suitescript.exception.NLServerSideScriptException: TypeError: Cannot call method "split" of undefined
What's throwing me off is that the library has no call of String.split() inside of it. And I have no way to log where the error may be originating from, as it is occurring when loading the module into the server script. And I know that's what's happening because this occurs regardless of the operation type and the scripts I create always have a condition to check for specific operation types before getting into the nitty gritty. For example, if I have it checking for a "print" operation, but the record is opened to "edit". I even have the entire function wrapped inside of a try/catch block.
I haven't had much luck in tracing the cause of these issues down, so I'm hoping that both isues stem from the same cause.
If you could post/provide your custom-module it would have helped alot to narrow down the issue, but as far as I can tell, you are including some module which is not available on the server-side scripts like N/currentRecord. This module is only available on client-scripts and will not let you load/create server-side scripts as you mentioned. So, if you remove those modules and try to update/create server-side scripts it should work.
Similarly, there are some modules which can only be used on server-side scripts like N/task module and would return error if you try to load/require them on client side scripts.
Ok, so there were errors on my behalf. One of my function definitions was missing "function". Since the functions are being added as properties of an object, I can see why it kept getting overlooked, if you aren't careful enough you eye just glides over the problem. There's also an issue with an array prototype, but I don't think the prototype is necessary for SuiteScript 2.0. It was developed for use with SuiteScript 1.0 due to a lot of handy object functions not yet having been implemented until a later JS version release than what is used for the server side engine in NetSuite.

Error while calling js library using $var in a Python app

In my python code using web.py, I am trying to call js library in main layout.
Here is the code snippet -
$var js: static/js/jquery-3.4.0.min.js static/js/bootstrap.min.js static/js/material.min.js
However, when I execute the code it gives me this error:
127.0.0.1:51225 - - [04/May/2019 07:05:29] "HTTP/1.1 GET /âModels/js1/bootstrap.min.js"" - 404 Not Found
I have also added screenshot of the code and folder structure as attachment. What I can see is that during the call to library, it adds the special characters â and then instead of single quotes there are double quotes at the end. I suspect this is the problem for the library not found.
I was thinking that this could be because of UTF-8 issues. Hence i went and also updated the encoding standards to UTF-8 both at server and client level. But even this is not solving the problem. Can someone please help with suggestions here. I have been struggling this from last 4-5 days and trying to research everything that could help but not of much use.
I'm using PyCharm for development.
The js library path is correct and it should have been called. If it calls then my js code will be executed. Please suggest if I'm doing something wrong here.

Errors in Ajax Control Toolkit's JS files after upgrade?

I upgraded Ajax Control Toolkit to v15.x and have been working on cleaning up the code after doing so. I'm running across exceptions being thrown, and VS breaks at points in the toolkit's JS files. I'm not sure why or how.
I've already double-checked that any scripts are not referenced multiple times, as was the leading suggestion on Google, but I still haven't figured it out.
I really need some help with this, as I have two months invested in this project. By the way, I'm using VS2013 and the project is in ASP/VB.
Here are a couple of the errors (to get the next, I've hit Continue):
Unhandled exception at line 1647, column 38 in
http://localhost:50236/ScriptResource.axd?d=D9drwtSJ4hBA6O8UhT6CQmpVfriIlRNRich93DvwGtp67E1h_mWKZOFWLDGS9BMtlj8olqCr6zhXtNsVz0umlIymKK0GfDoqTLzNLe2YQI2ElwoX58_2MZEcEFLKjdG6fbv26oE3vanxWpdhskXpgCIAYbDVlsaWWDXPE-98sV01&t=ffffffffb53e74b8
and
Unhandled exception at line 785, column 42 in
http://localhost:50236/ScriptResource.axd?d=D9drwtSJ4hBA6O8UhT6CQmpVfriIlRNRich93DvwGtp67E1h_mWKZOFWLDGS9BMtlj8olqCr6zhXtNsVz0umlIymKK0GfDoqTLzNLe2YQI2ElwoX58_2MZEcEFLKjdG6fbv26oE3vanxWpdhskXpgCIAYbDVlsaWWDXPE-98sV01&t=ffffffffb53e74b8
0x800a139e - JavaScript runtime error: Sys.InvalidOperationException:
Type Sys.Timer has already been registered. The type may be defined
multiple times or the script file that defines it may have already
been loaded. A possible cause is a change of settings during a partial
update.
0x800a139e - JavaScript runtime error: Sys.InvalidOperationException:
Type Sys.Extended.UI.BoxSide has already been registered. The type may
be defined multiple times or the script file that defines it may have
already been loaded. A possible cause is a change of settings during a
partial update.
Any and all help is appreciated! Thanks!
As it turns out, I followed the instructions on the Ajax Control Toolkit website on "un-bundling" the scripts, and now everything works. Apparently I didn't do something right, or the instructions were wrong. More than likely, the former.

Socket.io failed to load websocket.js

I tried to use socket.io in an simple app.
When it is calling the following js file:
node_modules\socket.io\lib\transports\websocket.js
The following line failed to load (It didn't really fail. It actually returned some empty result and failed some later codes using protocolVersions):
var protocolVersions = require('./websocket');
I debugged a little bit and it seems that the intention of this line is to load the following js file:
node_modules\socket.io\lib\transports\websocket\index.js
However because there is also a "websocket.js" (the file being run) under the "transports" folder, the require functions always tries to load "websocket.js" instead, and return some unexpected results.
I changed the folder name to "websockets" and call "require('./websockets')" instead, and it fixed the problem. However this is a shared library I am not feeling comfortable messing up its codes.
I am trying to understand why this problem happened this way and what should be the best way to work around it. I am sure this piece of codes has been well tested before released.
You probably already noticed that I am using backslash '\' to separate the path. Yes I am running it on Windows! Will that create any difference?
Thanks!

Categories

Resources