Why does Babel replace import with require?

Question

React

I'm new and I want to partially make the functionality on the site on React. At the same time, I want to break the functionality into separate js files, i.e. use modules. In modern JavaScript, this is done using the export / import commands (no additional libraries seem to be required).
Connected react, babel and my script like this:

<script src="/React/react.development.js" crossorigin></script>
<script src="/React/react-dom.development.js" crossorigin></script>
<script src="/React/babel.min.js"></script>
<script src="/app.js" type="text/babel"></script>

Next, in my app.js script, I want to import a function from a module:

import {Top} from './top.js'; 

class App extends React.Component {
  render () {
    <Top />
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

However, babel converts the import command to require and an error occurs:
Uncaught ReferenceError: require is not defined
How to fix the situation? What am I doing wrong ?

Answer 1

Have you tried searching the toaster for the answer? response <<<