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/lottie-react@2.1.0/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/lottie-react@2.1.0/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:
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 (eg this ).
EDIT
Add <script src="https://unpkg.com/prop-types@15.7.2/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/lottie-react@2.1.0/build/index.umd.js" crossorigin></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.