Adding JS script tag to React

Question

I have a script.js file on the server which is written in pure javascript (vanilla) and returns HTML form with some functionality. I download it by first <script> tag and use functions from script.js in second <script> tag in .html file and it is working. But I don't know how to make it run in React. I tried to do so, but not working.

script.js

var lib = lib || (function() {
  var _args = {};

  return {
    init: function(Args) {
      _args = Args;
    },
    func: function() {
      ...some logic and use document.write
      for render
    }
  }
}())

In HTML, it works

<script src='http://someurl.com/checkout'></script>
<script>
  lib.init(...some args);
  lib.func();
</script>

In React, it doesn't work

import React, {
  Component
} from 'react';
import axios from "axios";

class Checkout extends Component {

  state = {}

  componentDidMount = async() => {
    axios.get("http://someurl.com/checkout")
      .then(res => {
        const scriptInit = document.createElement("script");
        scriptInit.src = "http://someurl.com/checkout";
        // or scriptInit.text = res.data;
        scriptInit.type = "text/javascript";
        scriptInit.async = true;
        const scriptFunc = document.createElement("script");
        scriptFunc.text = "lib.init(...); lib.func();";
        scriptFunc.async = true;
        const script = scriptInit.outerHTML + scriptFunc.outerHTML;
        this.setState({
          script
        });
      })

  }

  render() {
    const __html = this.state.script || "";
    return <div id = "checkout"
    dangerouslySetInnerHTML = {
      {
        __html
      }
    }
    />
  }
}

export default Checkout;

Render div tag with all script tags but with 1110 x 0 resolution

What do you mean by but with 1110 x 0 resolution how the resolution relates to the script issue? — Mosh Feu
– Mosh Feu, Commented Jul 11, 2019 at 4:27
I have tried script*.innerHTML, but it returns js code from script.js — Dmitriy Kostenko
– Dmitriy Kostenko, Commented Jul 11, 2019 at 4:30
@MoshFeu This is written when I open the chrome devtolls' (F12) Elements tab — Dmitriy Kostenko
– Dmitriy Kostenko, Commented Jul 11, 2019 at 4:33
Make sense. But I still try to understand what's the issue. Is it that the script is not running? — Mosh Feu
– Mosh Feu, Commented Jul 11, 2019 at 4:33
Written you mean that this is the dimension of the script or the containg div tag? If so, it's not relevant because script doesn't need to have dimension. — Mosh Feu
– Mosh Feu, Commented Jul 11, 2019 at 4:35

anuragb26 · Accepted Answer · 2019-07-11 06:09:40Z

2

You need to call the functions after your script loads.You would not need axios for this,you can acheive this using the onload callback for the script load.

componentDidMount(){
 const script = document.createElement("script");
 document.head.appendChild(script);
 script.src = "http://someurl.com/checkout";
 script.async = true;
 script.onload = () => this.runScriptMethods();
}

runScriptMethods(){
  lib.init(...);
  lib.func()
}

answered Jul 11, 2019 at 6:09

anuragb26

1,47511 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dmitriy Kostenko Over a year ago

But if my script render some elements using document.write and must be in body and lib functions are implemented in script.js?

Dmitriy Kostenko Over a year ago

Thanks it works, but only with the help of eval("lib.init()...") in runScriptMethods() - it is not so good

Mosh Feu Over a year ago

No, it's not good and I'm not sure why you need the eval. If you're trying to run it without (e.g. lib.init()) what's happening?

Dmitriy Kostenko Over a year ago

@MoshFeu 'lib' is not defined. Because lib object is defined in script.js on another url/server

Mosh Feu Over a year ago

It doesn't matter as long as the script is executing in the context of the website. And surly, it will not be different than run it with eval.

Collectives™ on Stack Overflow

Adding JS script tag to React

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related