Soy una biblioteca React de aprendizaje nuevo y tengo este problema durante dos semanas y ahora no puedo resolverlo. entonces cuando tengo todas las funciones en un archivo "Index.js"

 function Header(){ return( <header> <nav className="nav"> <img src="./logo-react.png" width="100px"/> <ul className="nav-items"> <li>Price</li> <li>About</li> <li>Contact</li> </ul> </nav> </header> ) } function Maincont(){ return ( <div> <Header /> </div> ) } ReactDOM.render(< Maincont />,document.getElementById("root"))

todo funciona bien, no hay problema, pero una vez que corté las Funciones a otro archivo "Header.js" e intento exportarlo e importarlo a "index.js", deja de funcionar. Estoy usando React con enlaces CDN y esto es mi código HTML también

 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="index.js" type="text/babel"></script>

También intenté cambiar el tipo a Módulo, pero aún no hay posibilidad de que esto sea lo que me muestra en la consola.

 index.js:3 Uncaught ReferenceError: require is not defined at <anonymous>:3:15 at i (babel.min.js:24:29679) at r (babel.min.js:24:30188) at e.src.n.<computed>.l.content (babel.min.js:24:30503) at XMLHttpRequest.n.onreadystatechange (babel.min.js:24:29946) (anonymous) @ index.js:3 i @ babel.min.js:24 r @ babel.min.js:24 e.src.n.<computed>.l.content @ babel.min.js:24 n.onreadystatechange @ babel.min.js:24 XMLHttpRequest.send (async) s @ babel.min.js:24 (anonymous) @ babel.min.js:24 o @ babel.min.js:24 u @ babel.min.js:24 f @ babel.min.js:1 (anonymous) @ babel.min.js:1