I am working with a standalone React component that I want to display in a separate HTML file as a widget. I referenced the proper react libraries + babel but I can't get it to work because my functional component is using imports. I set the embedded script as a module but in that case, the exported function can be retrieved outside of the script. Can you point me out what I am doing wrong?
This is my HTML file:
<link href="/Content/css/rep/Portals.css" rel="stylesheet"/>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" data-type="module">
import {useEffect, useState} from 'react';
export const Portal = ({ tags, owner }) => {
const [data, setData] = React.useState([]);
const imgUrl = 'myendpoint-url';
useEffect(() => {
fethData(owner, tags).then(data => setData(data));
}, []);
const fethData = async (owner, tags) => {
//...do something asyncronously but response an array for now
response [];
};
return (
<div>
{data && data.map((item) => {
return (
<div key={item.id}>
... some intereesting markup
</div>
)
})}
</div>
);
};
</script>
Then, later in the file, I have another script that renders the first component.
<div id="root-app"></div>
<script type="text/babel">
const domContainer = document.getElementById('root-app');
ReactDOM.render(<Portal tags={['tag-1', 'tag-2']} owner={'me'} />, domContainer);
</script>
The previous code resulted in the error :

I remove all unnecessary code in my example only left the important things. I know... this is not the best way to implement react components but believe me, I am putting in a CMS that is absolutely inflexible, and there is no way to put in a different form.