Import and Use External Script in React - javascript

I am using a payment merchant in my React app which requires that I import their v1.js script and then use it to create an object.
First I tried to download the script and import it via import ./v1.js, but that left me with plenty of errors:
I've then imported the script in my index.html file instead via <script type="text/javascript" src="https://tpgw.trustpay.eu/js/v1.js"></script>.
This didn't incur any errors, however, the next step requires me to create an object referenced in the script using var trustPayApi = new TrustPayApi({secrets});.
When I run this code in my React app (substituting secrets for the correct value), I get an error saying
'TrustPayApi' is not defined
How can I correctly implement the script and use the TrustPayApi object defined within it?

Related

Import, fetch differences in http request and path

I am trying to understand how "import" works in client side javascript/typescript in terms of how data is exchanged with the server. Let us consider the following example:
Example code
page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
Something
<script type="module">
import * as Test from "./Test/test.js";
</script>
</body>
</html>
Test/test.js
import * as Test2 from "./test2.js"
export const test=0;
Test/test2.js
export const test2=0;
Question 1
What happens when page.html is loaded ? My understanding is that we probably have:
Executing the script of page.html
It requires to import "./Test/test.js". I assume a Get request is performed at "/Test/test.js".
Executing the script "./Test/test.js".
It requires to import "./test2.js". I assume a Get request is performed at "/Test/test2.js". I assume somehow the path of "/Test/test.js" was stored so that the relative path "./test2.js" is transformed into "/Test/test2.js".
Continuing
Is this correct ?
Question 2
Now let us imagine we have a file "Test/data.json" which is used in "Test/Test2.js". This file is "fetched" using the fetch command. My understanding is that the fetch command should take the path relative to the loaded page (i.e page.html) and thus should be "/Test/data.json". This behaves differently from how the import statement behaves (relative to current file).
Since I want my fetch path to be indifferent from the path of the loaded page, I have been "cheating" and have created a file "Test/data.js" instead of "Test/data.json" which contains exactly the data of "Test/data.json" but in an object. Is this a bad practice? If so, is there a good way to obtain what I wish?
Question 3
I just realized that I kind of have the same problem with css imports. It would be nice to import the css at first load of my component using a relative path (this way the component does not need to know where the loaded page is).
Possible (but looking for better) answer to Questions 2 and 3
Have a precompiler add a variable for each html and js file containing the path relative to the root project directory. Have a global variable containing the path of the loaded page. Compute at runtime the path of the file that I which to load. Is there a better way... ? Or am I completely doing things badly? Or am I just aiming for a design that cannot be achieved using basic javascript and I should just go all in on angular?

React always returns index.html as response

I'm trying to set up a datatable in my react app and I'd like to do the following
Here's how the documentation for the datatable is doing it:
<script src="plugins/table/datatable/datatables.js"></script>
<script>
$('#dt').DataTable({
"stripeClasses": [],
"pageLength": 7
});
</script>
I tried doing it in react via
import ../plugins/table/datatable/datatables.js"
I also used the method, where you create a script element and append in to the document.body, but both methods seem to return the index.html of my app.
I've read that it's due to React's way of handling requests - I've done an API and I can successfully hit it, however I'm not familiar how to import local files sucessfully. I've also tried importing the files inside the index.html file, but the result is still the same.

File location issue in react native

I am trying to access an external file to use in my App.js file , called scrollv.js
which is in a folder called tutorials . But it returns
Can't resolve './tutorial/scrollv.js' in '/Users/bet/Desktop/PROJECT/mern/react-native/project/tutorial/learning'
Here's my file strucrture, my scrollv.js and my App.js
Every time react re-enders my page sometimes I get an error like the one above or the predicted output which only appears on the web.
Is there a solution for this?

How can I serve remote React app with a script tag?

We have at our company a react app (built with create-react-app) which is served today via an iframe, which works well.
A need has risen to serve the app (which is always embedded within other pages), with a script tag alone (no iframe tag).
I thought of something like:
<div id="app-placeholder"></div>
<script src="https://our-app.com/init.js"></script> // this will create a function called window.InitMyApp
<script>
InitMyApp('#app-placeholder', 'token', otherOptions)
</script>
I've tried to create init.js file in the react app's public folder. I can access the file.
From that file, how can I render the react app itself to the given selector (#app-placeholder)?
Because this file is served as-is, and doesn't get transpiled by webpack/babel, I cannot use import/jsx/require() and other stuff.
Am i on the right track?
Should I manually transpile this file?
Are there any other solutions to this rendering method?
You should try configuring the compiler with { output.library }. This should produce a compilation output that's ready for distribution, which means you can easily reference it in another document (and not need to worry about, say, transpiling/optimizing sources, because this was already performed by webpack).
Here's an example of a multi-part library produced by webpack. As you can see, the entrypoint exports are being assigned to window.

vuejs - google tag manager

I have a vuejs project with various pages:
study.vue
result.vue
My client want me to add in the Google Tag Manager code so that they can use google analytic to track. Where should I add the code in my .vue file? Or should I just add it in the index.html?
Update01
This is what I do so far:
I add the Google Tag Manager code to the index.html.
I installed vue-gtm.
I have app.js and bootstrap.js. basically, bootstrap.js will have all my other js frameworks added. Like lodash.js or 'jquery.js'. I add the sample code from vue-gtm into bootstrap.js:
window._ = require('lodash');
window.moment = require('moment');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import VueGtm from 'vue-gtm';
Vue.use(VueGtm, {
debug: true
})
In all the vue file, I add this code:
this.$ua.trackView('Sample', 'samplepath');
However I got error:
TypeError: Cannot read property 'trackView' of undefined
What seems to be the error?
I assume you are talking about the script that you get when you create an account?
There should be two scripts to include in your HTML, one that has comments around it that include (noscript) and one that doesn't. Both should probably go in your index.html file (whichever file has the <head> and <body> tags). The one that has the noscript should go immediately after the <body> tag, the one that doesn't have the noscript should go near the top of the <head> section.
If you are asking how to fire an event, such as when the user interacts with one of those Vue elements, then yes the code for firing the event should go in the Vue component.
UPDATE 1: I looked into it and setup my own Laravel installation to test (since that seems to be what you're using) and tested it. The problem is that $ua is part of the Vue Analytics, so if you want to use $ua you need to install the vue-ua module as well and add that to Vue. I don't know why the documentation for the Tag Manager module shows how to use the Analytics module without making reference to it, maybe you should file an issue on the Tag Manager GitHub to make the documentation more clear!
So in summary, you should replace $ua with $gtm instead. I tested it and $gtm has a trackView function so it will probably achieve what you want, but I don't know how to use Google Tag Manager so you'll have to test it out yourself.

Categories

Resources