reveal.js: importing a react component into a slide without a cross origin request error?

Within reveal.js presentation, how would one import a react component into a slide? I have one slide that is calling a react component elsewhere and it requires a different component. At the moment I get a "cross orgin request blocked" error. For ex:

import plotgenerator from './js/plotGen'

Or in a simulated example:

<div class="reveal">
  <section>
  <div id="reactstuff"></div>
  </section>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

<script>
  Reveal.initialize({etc})
</script>
<script type="text/babel">
//create a react component here that would render in the above slide where the div id "reactstuff" is defined
//******problem
//I would like to import a component here to be run in this code, like below
import plotgenerator from './js/plotGen'
//******
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {null};
  }
  doSomething() {
  }

  render() {
    return (
      <div className="app">
        <plotgenerator/>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('reactstuff')
);
</script>