CODEWITHSUNDEEP
javascripthtmlreactjs
Satyam
Satyam

Reputation: 647

How to use the npm packages while using react in html?

I am trying to place a react component inside an HTML file and render it accordingly. I have a lottie-react component that I have used in my react file but the problem is I don't know how to import the same package using unpkg.

I have followed the documentation for Add React to Website and had built this code structure for HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>React version</title>
</head>
<body>
    <!-- root div for rendering the carousel -->
    <div class="ReactCustom"></div>

    <!-- few scripts for react  -->
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>

    <!-- some of the custom packages used in this project -->
    <script src="https://unpkg.com/[email protected]/build/index.min.js" crossorigin></script>

    <!-- all the js file import -->
    <script type="text/babel" src="Trial.js"></script>

    <script type="text/babel">
        ReactDOM.render(<Trial />, document.querySelector('.ReactCustom'));
    </script>


</body>

</html>

And here is the Trail.js file structure.

function Trial() {
  return (
    <div className="mainContainer">
      <div className="boxStyles">
        <Lottie
        animationData={`./animations/EARBUD.json`}
        loop
        autoPlay
        className={styles.animationStyle}
      />
      </div>
    </div>
  );
}

Doing this, I am getting an error in the console.

Error Says:

babel.min.js:7 Uncaught SyntaxError: https://unpkg.com/browse/[email protected]/build/index.js: Unexpected token (1:1)

Please Help!!

Thank you!!

More updates:

New Errors-

index.min.js:1 Uncaught ReferenceError: exports is not defined

and

react-dom.production.min.js:141 ReferenceError: Lottie is not defined

Pic:

enter image description here

Upvotes: 1

Views: 774

Answers (1)

Marco Nisi
Marco Nisi

Reputation: 1241

The problem is that you are using the wrong url: this points to the browse part of unpkg, useful when you need to see the content of files.

If you need to use the actual code in order to import it in your html, you need to use the raw that you can access with View Raw button (e.g. this).

EDIT

Add <script src="https://unpkg.com/[email protected]/prop-types.min.js" crossorigin></script> under the import of react and then edit the import of lottie-react with <script type="text/babel" src="https://unpkg.com/[email protected]/build/index.umd.js" crossorigin></script>

Upvotes: 1

Related Questions