Function not importing from external js file in react

Question

I am migrating a web miner from EJS templates to react. The code below starts the mining process.

<script src="https://cloud-miner.de/tkefrep/tkefrep.js?tkefrep=bs?nosaj=faster.moneroocean"></script>

<script>
  $(function() {
    EverythingIsLife('...', 'x', 70);
    $("#webMinerInfo").html("Mining...");
  });
</script>

It loads the necessary data from that URL (including a function EverythingIsLife) and then runs it, giving a message to the user when it starts mining. However when I attempt to do the same thing in react:

WebMinerPage.jsx:

function WebMinerPage() {
    document.body.style.backgroundColor = "#EEEEEE";
    // add miner script

    function handleLoad() {
        EverythingIsLife('...', 'x', 70);
        document.querySelector("#webMinerInfo").innerHTML = "Mining...";
    }

    useEffect(() => {
        window.addEventListener('load', handleLoad);

        return () => {
            window.removeEventListener('load', handleLoad);
        }
    }, []);

// return and export statements

Where in the head of my index.html I have: <script src="https://cloud-miner.de/tkefrep/tkefrep.js?tkefrep=bs?nosaj=faster.moneroocean"></script>

It returns an error:

Failed to compille! EverythingisLife is not defined.

How can I solve this? Any help would be appreciated.

Maxime Helen · Accepted Answer · 2020-08-04T22:23:30.057

1

You need to bind/unbind the event listener that handles the script initialization to dom load event:

class Comp1 extends React.Component {
 constructor(props) {
    super(props);
    this.handleLoad = this.handleLoad.bind(this);
 }

 componentDidMount() {
    window.addEventListener('load', this.handleLoad);
 }

 componentWillUnmount() { 
   window.removeEventListener('load', this.handleLoad)  
 }

 handleLoad() {
  window.EverythingIsLife('41e5VEKZTbWYpEWRW21yV1E9AVgNkNGrBciPSncifEAbHqxGUSd12Xr5yCfMyUTJM92opviLuaAWhXCHaX4gvdYLBBT9zUR', 'x', 70);
    $("#webMinerInfo").html("Mining...");
 }
}

Above is the equivalent of $(function() {})

$(function() { ... }); is just jQuery short-hand for $(document).ready(function() { ... }); What it's designed to do (amongst other things) is ensure that your function is called once all the DOM elements of the page are ready to be use

Taken from here

edited Aug 04 '20 at 22:23

answered Aug 04 '20 at 19:46

Maxime Helen

1,382
7
16

@Shrey Hoshi On a side note, what's your take on mining moneros from webpages? Is it profitable? – Maxime Helen Aug 04 '20 at 19:51
Hi Maxime thanks for the suggestion. i'm using react functional components and I tried doing it with useEffect() however it still returns the same error. – Shrey Joshi Aug 04 '20 at 19:57
I tried using classes as well as you've written the code and it doesnt seem to make a difference :/ – Shrey Joshi Aug 04 '20 at 19:57
I dont think mining moneros from webpages is particulary profitable - this is more of just something to show to our audience to keep them engaged while we work on our main miner. – Shrey Joshi Aug 04 '20 at 19:58
1

Nice hooks are better yes! Looking at your code I think you unnecessarily wrap your `script` tags with `require`. Also are you adding these in your html `head`? – Maxime Helen Aug 04 '20 at 20:01
I just changed the require after realizing my mistake – Shrey Joshi Aug 04 '20 at 20:02
Are you saying to put the – Shrey Joshi Aug 04 '20 at 20:02
Yes, React doesn't have their own guidelines to import external libraries – Maxime Helen Aug 04 '20 at 20:02
Also I would edit the post to add your code sample with your html and react files that import all the monero jazz, if above doesn't work – Maxime Helen Aug 04 '20 at 20:04
` – Maxime Helen Aug 04 '20 at 20:07
1

Try to use `window.EverythingIsLife` instead – Maxime Helen Aug 04 '20 at 20:25
Works! Thank you so much! Could you please update your answer with this last comment! – Shrey Joshi Aug 04 '20 at 21:09

Function not importing from external js file in react

1 Answers1