0

I received an HTML file with 2 scripts in the head and I'm figuring out the best way to execute them in my react app. The first script load socket.io.js and the second contains the JS code for the upload system:

Original code

//...
  <head>
    <link rel="stylesheet" type="text/css" href="/css/upload.css" />
    <script src="/js/socket.io.js"></script>
    <script type="text/javascript" charset="utf-8">

      var socket = io.connect("/", { path: "/app/socket.io" });
      var SelectedFiles = [];
      var SelectedFile = 0;
      var paused = 0;
      var FReader;
      var dat;

      window.addEventListener("load", Ready);
      function Ready() {
      //...
      }
      function handleUploads() {
       //...
      }
      function StartUpload(Name, size) {


        FReader.onload = function(evnt) {
          socket.emit("Upload", {
          //... 
          });
        };
        socket.emit("Start", {
         //...
        });
      }
      function getBlocks(data) {
      //...

      }
      socket.on("MoreData", function(data) {
      //...
      });
      function UpdateBar(percent) {
      //...
      }
      socket.on("Done", function(data) {
      //...
      });

      function Refresh() {
        location.reload(true);
      }

    </script>
  </head>
  <body>
//...

First of all I moved the JS code content in a new JS file named "upload-script.js" and then used "React Helmet" module (https://www.npmjs.com/package/react-helmet) in order to load them in document head during component rendering:

My code

return (
      <Row className="mb-4">
        <Helmet>
          <link rel="stylesheet" type="text/css" href="/css/upload.css" />

          <script src="/js/socket.io.js" />

          <script src="/upload-script.js" />
        </Helmet>
        <Colxx xxs="12">

Checking on browser the module correctly adds the scripts in the document head, but come out the following error:

./src/containers/form-validations/upload-script.js
 Line 2:14:   'io' is not defined           no-undef
 Line 124:3:  Unexpected use of 'location'  no-restricted-globals

The browser cannot compile the app because in the JS file "upload-script.js" contains variables that are only defined in the first script.. how can I solve it? Is this a good way to add the scripts in a React app?

Any suggestions or guidance would be greatly appreciated. Thank you in advance.

anthares
  • 85
  • 1
  • 5
  • Hi looks like this answer might help https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx – corvash Mar 31 '20 at 13:32
  • Hi looks like this might help you: https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx – corvash Mar 31 '20 at 13:34
  • Hi corvash, thanks for your message. I already found this thread and I took from here the idea of using React Helmet for adding the scripts in document HEAD. The issue I'm facing is the integration of these particulars scripts.. as by the error it's clear that the second script is connected to the first one ( "io" is not defined in because it is defined in the first script ) - normally in a HTML page they are executed together but I doesn't know how to execute both of them in a React component. – anthares Apr 01 '20 at 07:24

0 Answers0