[Bug] Erro no import | JavaScript: validando formulários

Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1)

Esse é o erro que o DevTools aponta ao tentar rodar o código!

import validaCPF from "./valida_cpf";

const camposDoFormulario = document.querySelectorAll("[required]")

camposDoFormulario.forEach((campo) => {
    campo.addEventListener("blur", () => verificaCampo(campo));
})

function verificaCampo(campo) {
    if (campo.name == "cpf" && campo.value.length >= 11) {
        validaCPF(campo);
    }
}

export default function validaCPF(campo) {
    const cpf = campo.value.replace(/\.|-/g, "");
    
    if (validaNumerosRepetidos(cpf) || validaPrimeiroVerificador(cpf) ||validaSegundoVerificador(cpf)){
        console.log('Esse CPF não é válido!')
    }else {
        console.log('Existe!')
    }
}

Olá, tudo bem?

Obrigado por compartilhar o erro que está enfrentando no fórum! Vou ajudar a solucionar o problema relacionado ao import statement e garantir que seu código funcione corretamente.

O erro "Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1)" ocorre quando você tenta usar o comando de importação em um contexto que não é reconhecido como um módulo. Esse erro indica que o código que está tentando rodar está sendo tratado como um script comum em vez de um módulo.

No seu código, você está usando o comando import para importar a função validaCPF do arquivo valida_cpf.js. No entanto, os navegadores normalmente não interpretam scripts como módulos por padrão, a menos que você especifique isso explicitamente.

Para resolver esse problema, você pode adicionar o atributo type="module" à tag <script> no seu arquivo HTML onde o código JavaScript está sendo carregado. Dessa forma, o navegador reconhecerá que o script deve ser tratado como um módulo. Aqui está um exemplo de como você pode modificar sua tag <script>:

<script type="module" src="seu_arquivo.js"></script>

Além disso, você também precisa garantir que o servidor onde seu código está hospedado esteja configurado para fornecer os arquivos JavaScript com o cabeçalho correto Content-Type: application/javascript. Isso é necessário para que o navegador reconheça os arquivos como módulos.

Depois de adicionar o atributo type="module" à tag <script> e configurar corretamente o cabeçalho do arquivo JavaScript, o erro de importação deve ser resolvido. Agora, você poderá utilizar o comando import sem problemas.

Uma vez que você tenha feito essas alterações, o erro "Uncaught SyntaxError: Cannot use import statement outside a module" não deve mais ocorrer, e seu código deve funcionar conforme o esperado.

Espero que esta explicação e solução tenham sido úteis para você. Se você tiver mais dúvidas, não hesite em perguntar. Espero que tenha te ajudado, bons estudos!