I'm interested in creating a React web app that teaches kids how to use Python through programs such as Turtle graphics. I thought that Skulpt would be a good library to use since it already has a demo that shows here how to use it within a HTML page. However, while it loads fine in a normal web page, I'm having difficulty getting it to run in my React app, probably due to the global variables that skulpt.min.js sets. Specifically, I get the following message:
./src/utils/skulpt-stdlib.js
Line 1:1: 'Sk' is not defined no-undef
I imagine it's because the skulpt-stdlib.js script relies on the skulpt.min.js script to be read first and set its global variables before the skulpt-stdlib.js script works. What would I need to do in React to get this to work the same way it does in a normal web page? Thank you!
try this, hope this works, i am also trying, i will update this if it works completely.
add the below code in the beginning of skulpt.min.js
function Sk() {}
and the below code in the end of skulpt.min.js
export { Sk };
Related
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.
Before anybody starts screaming at me for using global variables, I have a few things to say:
This is only for one variable and will only be used temporary (my estimates says that it will be gone within one year)
I'm open for suggestions on how to solve this a better way
Our project has a bit of a unusual setup. We have an old ASP.Net website, that we are slowly converting to VueJs, page by page. Due to this, we are using UMD
Currently Vue is used for the menu, showing content, etc. When showing an old aspx page, we are using iframe. My goal is for my Vue to be able to catch events thrown from the open aspx page
For this I thought the mitt emitter would be perfect for the job. I'm using it in my Vue project already
On the code side of things, I have the following:
I have a Toolbox.js file, where I try to keep my global variable
var emitter;
async function ClickFromOldPage()
{
emitter.emit('test');
}
In mounted in my vue file (the first thing that opens) I'm setting the global variable
mounted()
{
window.emitter = window.mitt();
window.emitter.on('test', this.Test);
},
And then I have an aspx page that calls ClickFromOldPage
Both the vue file and aspx file is loading Toolbox.js like this
<script src="../Vue3/Javascript/Toolbox.js"></script>
From what I could gather around the net, this should do it, but emitter is undefined when calling Toolbox from the aspx page
Another way was by using top to set/get variables, but this gives the same result
I also tried localStorage, but this can't handle complex objects like the emitter
The only other way to handle this challenge I can think of, is by using cookies or localStorage, where the aspx page writes 'Clicked' (or whatever), then have a function in Vue that checks for said data every second or so. This doesn't sound like a good solution, but the only solution I can come up with
Any other ideas?
Preface: I have 1 day of experience playing around with React.
Using this source code from a tutorial, which is set up to login with google. https://github.com/The-Tech-Tutor/spring-react-login
I want to add the "Login with Paypal" button to the Login.js page.
This is what PayPal generates for me.
<span id='lippButton'></span>
<script src='https://www.paypalobjects.com/js/external/api.js'></script>
<script>
paypal.use( ['login'], function (login) {
login.render ({
"appid":"sdfgaesdfgrfed",
"scopes":"openid",
"containerid":"lippButton",
"responseType":"code",
"locale":"en-us",
"buttonType":"LWP",
"buttonShape":"pill",
"buttonSize":"lg",
"fullPage":"false",
"returnurl":"http://localhost:3000/profile"
});
});
</script>
How do I get this third party js to work with React?
Thank you.
I would recommend to take a look at https://developer.paypal.com/docs/log-in-with-paypal/ to get at least a deeper understanding what paypal is doing. I mean second day of react is may be a bit hard to integrate yourself, but as I can't assume your level of knowledge in general about web-dev (front + back) I think this is the way to go. From your code there is nothing suspicious only that you hopefully obfuscated your appId. Otherwise you need to create an appId in your Paypal-Account configure everything correctly (I guess especially the returnurl) and then use the provided appId.
If you only want to migrate the JS files to react look here: https://www.geeksforgeeks.org/how-to-include-an-external-javascript-library-to-reactjs/
I would take the last approach (document.createElement) as is it fully under your control to a certain extent, especially for debugging.
You could also write the whole loader and use implement the paypal.use call inside the react component by using the callback when the script is loaded an then access the paypal.use method.
I am working on a project built with Javascrpt, jQuery, and Vite.js. My colleague built a data visualization using D3 - a US states map - that I need to implement in the project on a specific page. They built the component using test data, my job is basically to load the component onto a page passing it actual returned data from an API call.
Everything in the test project works perfectly, but when I tried to implement this code into a script file in the project - literally copying and pasting from the working version - I got an error saying certain properties could not be read. After failing to debug for sometime, I randomly tried removing type="module" from the script tag link in HTML, and boom, everything worked. Does anyone have an idea of why this would be? I cannot get this code to run when the script type is set to module, except I need the script type to be set to module since I'm importing lots of components for other aspects of the page.
With the way the CodePen is set up, I couldn't replicate the issue since the HTML and JS files are automatically linked. But if you copy this code into your editor, and then in the html, set the the JS file to a module ` You'll see the issue.
Thanks. I'm at a total loss for what to do here. I could put all the D3 code in it's own script file, but then I have no way pass it variables from other files if it's not a module.
Per the comments, the following lines in my original code were not working in strict mode:
this.uStates = uStates;
this.uStatePaths = uStatePaths;
The fix was simple, I just needed to write the following instead:
window.uStates = uStates;
window.uStatePaths = uStatePaths;
sorry for asking a very basic question...
i am new at WordPress/Gutenberg, and I am not familiar with PHP. trying to write a custom block with javascript at Gutenberg, but I found most of the functions available only work at PHP. how I can use these functions in javascript ..
like .. get_post_meta() , or get_the_tags()
thank you
Yes, PHP functions can be used inside Gutenberg blocks by creating a dynamic block which calls a PHP function to render the content. This enables use of all the available PHP & WordPress functions like get_post_meta() etc.
The Developer documentation has an example block code that shows how this is implemented and is a great place to get started. Also, the <ServerSideRender> is a useful component that enables rendering of live PHP inside the block editor.
Reviewing the source code of an existing core block (eg. latest posts) that uses PHP to render may also help you get started with building your own block.
There is a workaround since PHP outputs text you can use it to write Javascript code that will be executed on the page load or triggered by an event. Just don't forget to surround your js code with script tags