CODEWITHSUNDEEP
javascripthtmlreactjs
Wesley Basson
Wesley Basson

Reputation: 167

How does one include external scripts in a React web application?

I have created a React web application using create-react-app and I am busy incorporating a dashboard template into the project. I have managed to build out most of the HTML into various different re-usable React components and I was able to import all the stylesheets successfully. I however hit a brick wall when I tried to incorporate the template's JavaScript files into my project.

So, what I did was I took all the necessary JavaScript files and added them all to a sub-folder of assets (located in the public folder) called js, i.e:

/public/assets/js/{file.js}

I then added script tags to the index.html in the public folder:

<!DOCTYPE html>
<html lang="en" class="js">
   <head>
      <meta charset="utf-8" />
      <!-- other meta tags -->
      <title>My Dashboard</title>
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      <script type="text/JavaScript" src="./assets/js/bundle.js"></script>
      <script type="text/JavaScript" src="./assets/js/scripts.js"></script>
   </body>
</html>

When I fire up the development server the app loads properly, however something strange happens with the scripts; I have added a component (a slider) to the landing page which makes use of the bundle.js and scripts.js files. When the page initially loads the component displays correctly (i.e. the JS works), however a second later the component becomes completely broken - almost as if the page is refreshed without the JS loading properly the second time round.

When I looked at the console I saw I had two JS files with the same name called up. I realized as part of the packaging WebPack does in the background it generates its own bundle and serves it up - and this bundle is also called bundle.js. Consequently I renamed the external JavaScript file to externalbundle.js and also respectively made the change to the src attribute in the script tag:

<script type="text/JavaScript" src="./assets/js/externalbundle.js"></script>

The app compiles and loads successfully, and I see no warnings or errors in the console, yet the same still happens; the slider loads properly for that first second and then breaks (the console still doesn't show any warnings or errors).

I have also added console.log('Loaded') at the end of the externalbundle.js file and this appears as expected in the console when the app has loaded.

So I would really like to know if I am referencing these external scripts incorrectly, maybe not fully grasping the way the DOM works and how it deals with external scripts, or is there an entirely different way of dealing with external scripts?

Maybe worth mentioning also is that the JavaScript files that I'm referencing aren't available as libraries on npm. I have also tried importing them inside of index.js instead (of course moving the files to the src directory) which produces all sorts of errors such as

'define' is not defined

and

Expected an assignment or function call and instead saw an expression

Trying to convert the existing JS file into a NodeJS "compatible" file (by adding exports.{filename} = function(a,b) { ... } and calling it inside of index.js by importing import { filename } from './path/to/file.js' and calling it using filename()) produced even worse results.

Any ideas?

Upvotes: 2

Views: 692

Answers (1)

Ayushya
Ayushya

Reputation: 1920

You can use scriptjs

import $script from 'scriptjs';

class TaskLists extends Component  {

  UNSAFE_componentWillMount () {
    $script(['https://YOUR_SCRIPT_URL_HERE'], 'scriptidentifier');
  }
  render () {
   return (<div>Hello</div>)
  }
}

Example from docs https://www.npmjs.com/package/scriptjs

// load jquery and plugin at the same time. name it 'bundle'
$script(['jquery.js', 'my-jquery-plugin.js'], 'bundle')

// load your usage
$script('my-app-that-uses-plugin.js')


/*--- in my-jquery-plugin.js ---*/
$script.ready('bundle', function() {
  // jquery & plugin (this file) are both ready
  // plugin code...
})


/*--- in my-app-that-uses-plugin.js ---*/
$script.ready('bundle', function() {
  // use your plugin :)
})

Upvotes: 1

Related Questions