Javascript file in html won’t work in React

  external, javascript, reactjs

I’m trying to use a third-party Javascript file to create a scrolling effect. As a test, I got it to work on a normal html file, but when I try to use it in React, it won’t even run.

According to the GitHub resource, I must use the script akin to this:

<script type="text/javascript" src="./src/skrollr.js"></script>
    <script type="text/javascript">
    var s = skrollr.init();
    </script>

Here is the React html file:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>React App</title>
</head>

<body>
  <div id="root"></div>
</body>
<script type="text/babel" src="../src/skrollr.js"></script>
<script type="text/babel">
  var s = skrollr.init();
</script>

</html>

I read that I needed to change the type to bable. That at least stopped some errors. But it still won’t run.

If I try to import it into my App.js file instead, I get a new error stating:

srcskrollr.js Line 1772:37: ‘define’ is not defined no-undef
Line 1773:3: ‘define’ is not defined no-undef

This error does not exist in the non-react version of this page.

I’m still really new to react, and I would like to try to get this to work so I can understand more about the relationships between the code.

Source: Ask Javascript Questions

LEAVE A COMMENT