[Bug] React bug na hora de importar componentes | Front-end

Estou fazendo uma aplicação React por CDN, e na hora de importar componentes tenho o seguinte erro:

Uncaught ReferenceError: require is not defined
    at <anonymous>:3:14
    at i (babel.min.js:24:29679)
    at r (babel.min.js:24:30188)
    at o (babel.min.js:24:30596)
    at u (babel.min.js:24:30969)
    at f (babel.min.js:1:1812)
    at babel.min.js:1:6287

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <title>Document</title>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        import App from "./Componentes/index.js"

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

</body>
</html>

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Ola Mundo</h1>
            </div>
        )
    }
}

export default App;

Quero apenas escrever Ola Mundo na tela, com um componente importado

Oi Rafael, tudo bem?

Desculpe a demora em retornar.

O erro que você está enfrentando ao importar componentes em sua aplicação React por CDN está relacionado ao fato de que a palavra-chave "require" é usada para importar módulos em ambientes de servidor, como o Node.js, mas não em ambientes de navegador, como o seu caso.

Para importar componentes em uma aplicação React por CDN, você deve usar a sintaxe "import" do ES6, que é suportada pelos navegadores modernos. No seu código, você já está usando essa sintaxe para importar o componente "App" no arquivo "index.js". No entanto, como você está usando o Babel para transpilar seu código, é possível que a configuração do Babel esteja desatualizada ou incompleta, impedindo que a sintaxe "import" seja transpilada corretamente para o código compatível com o navegador.

Uma solução para o seu problema é adicionar o plugin "@babel/plugin-transform-modules-umd" ao seu arquivo de configuração do Babel, que permite a transpilação de módulos ES6 para um formato compatível com navegadores antigos. Aqui está um exemplo de como adicionar esse plugin ao seu arquivo de configuração:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-modules-umd"
  ]
}

Nesse exemplo, estou adicionando o plugin "transform-modules-umd" junto com os presets "env" e "react" ao arquivo de configuração do Babel. O preset "env" permite a transpilação de recursos ES6 para versões específicas de navegadores, enquanto o preset "react" permite a transpilação de sintaxes JSX.

Lembre-se de que, ao usar o Babel para transpilar seu código, é importante configurá-lo adequadamente para que o código seja compatível com navegadores antigos e possa ser executado corretamente. Além disso, é importante lembrar que o uso de CDN para React é recomendado apenas para fins de aprendizado e não para produção.

Espero que tenha te ajudado.

Um abraço e bons estudos.

Mergulhe em programação