Using an external script in React / Meteor

Question

I'm trying to include an external script in my react component in Meteor. I've attempted just placing the script tag in my component like so :

TheLounge = React.createClass({
  render() {
    return (
      <div>
        <div className="main">
          {/* Uberflip Embedded Hub (Use this to generate the frame below) */}
          <script>var ufh_top_offset = 0, ufh_bottom_offset = 0;</script>
          <script type="text/javascript" src="https://thelounge.tullyluxurytravel.com/hubsFront/embed_iframe?u=https%3A%2F%2Fthelounge.tullyluxurytravel.com%2Fh%2F%3Fembedded%3D1%26offsetTop%3D0%26offsetBottom%3D0%26hideHeader%3D1%26hideBanner%3D0%26hideFooter%3D1%26hidePriNav%3D0%26hideSecNav%3D0%26linkBreakOut%3D0"></script>
          {/* /End Uberflip Embedded Hub */}

        </div>
        <Footer />
      </div>
    );
  },
});

This makes it fine for the first time the page is loaded (via another page or a refresh). However, the script doesn't load up again when one navigates to another page and back.

So far I've attempted the following:

Injecting the script in componentDidMount and componentDidUpdate like the following:

In componentDidMount and componentDidUpdate:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
// Tested the line below with body, head, and a div with specific id.
document.getElementsByTagName("body")[0].appendChild(script);

I've also tried using these packages:

https://github.com/yariv/ReactScriptLoader
https://github.com/kadirahq/meteor-dochead
$.getScript()

However, with all four of the approaches above I get the error:

Error: Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

I realize that's because the script I'm trying to load uses document.write();

I'm running out of things to try, I'd appreciate new ideas as to how to include this script into the React component.

Ilanus · Accepted Answer · 2016-06-17 10:22:34Z

1

tags in body or templates aren't executed by Meteor, they are parsed and then handled by Meteor's templating system. try jQuery getScript function:

componentWillMount() {
  $.getScript('https://thelounge.tullyluxurytravel.com/hubsFront/embed_iframe?u=https%3A%2F%2Fthelounge.tullyluxurytravel.com%2Fh%2F%3Fembedded%3D1%26offsetTop%3D0%26offsetBottom%3D0%26hideHeader%3D1%26hideBanner%3D0%26hideFooter%3D1%26hidePriNav%3D0%26hideSecNav%3D0%26linkBreakOut%3D0');
}

answered Jun 17, 2016 at 10:22

Ilanus

6,9585 gold badges15 silver badges37 bronze badges

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

1 Comment

Gwened Over a year ago

Note that this will never cache the script

Manov · Accepted Answer · 2016-06-17 09:55:13Z

0

I didn't try this out, but I read this for blaze. Maybe it can helps

https://maxlibin.com/meteor-include-external-javascript-files/

answered Jun 17, 2016 at 9:55

Manov

691 silver badge6 bronze badges

Collectives™ on Stack Overflow

Using an external script in React / Meteor

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related