erro no addEventListener

Fala ai Gabriel, tudo bem? Falando assim sem ver os códigos é bem complicado, mas, você está tentando fazer um addEventListener em um valor null, ou seja, o elemento que você procurou na página não foi encontrado.

Tente dar uma olhada na maneira como você está procurando e o que você está procurando, por exemplo: document.querySelector('.alguma-classe'), nesse caso deveria existir um elemento com a classe alguma-classe na página para que o querySelector consiga encontrá-lo.

Espero ter ajudado.

não é esse o problema, eu chuto q seja uma coisa boba que deixei passar

abaixo está meu código:

código referente ao listagem-cliente.js

import { listarClientes, deletaCliente } from '../../api/cliente.js';
import "../../assets/css/clientes.css";
import inicializaCadastro from '../cadastro/componentes-cadastro.js';

const removeCliente = (id) => {
  if (confirm("Deseja deletar o cliente ?")) {
    debugger;
    deletaCliente(id)
    window.location.reload()
  }
}

const conteudo = `
  <thead class="thead-dark"> 
    <tr>
      <th scope="col">CPF</th>
      <th scope="col">Nome</th>
      <th scope="col"></th>
      <th scope="col"><a class="btn btn-primary">Novo Cliente</a></th>
    </tr>
  </thead>
`
const container = document.querySelector('[data-container]');
const tabela = document.createElement("table");

tabela.innerHTML = conteudo;
tabela.classList.add("table");
container.appendChild(tabela);

const novoCliente = document.querySelector('.btn');

novoCliente.addEventListener('click', () => {
  inicializaCadastro()
});

const corpoTabela = document.createElement('tbody');

const exibeCliente = (cpf, nome, id) => {
  const linha = document.createElement('tr');

  const conteudoLinha = `
    <td>${cpf}</td>
    <td>${nome}</td>
    <button type="button" class="btn btn-danger" onclick="removeCliente(${id})">Excluir</button>
    <a href="../edita/edita-clientes.html?id=${id}">
    <button type=""button class="btn btn-info">Editar</button>
    </a>
`

  linha.innerHTML = conteudoLinha;
  return linha;
};

listarClientes().then(exibe => {
  exibe.forEach(indice => {
    corpoTabela.appendChild(exibeCliente(indice.cpf, indice.nome, indice.id))
  })
}

)
tabela.appendChild(corpoTabela);

código referente ao componente-cadastro.js

import eventoEnvia from "./cadastro-clientes.js";

const form = document.createElement("form");

const cadastro = `
    <div class="container">
    <div class="form-group">
      <label>CPF</label>
      <input type="number" class="form-control" data-cpf placeholder="Digite seu CPF aqui" />
    </div>
    <div class="form-group">
      <label>Nome</label>
      <input type="text" class="form-control" data-nome placeholder="Digite seu nome aqui" />
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
    </div>;
    `

form.innerHTML = cadastro;

const inicializaCadastro = () => {
  const container = document.querySelector('[data-container]');
  eventoEnvia(form)
  container.innerHTML = ""
  container.appendChild(form)
  return form
}

export default inicializaCadastro;

código referente ao cadastro-cliente.js

import validaCPF from '../valida/validaCPF.js';
import { cadastrarClientes } from '../../api/cliente.js';

const eventoEnvia = (form) => {

    const formCadastroCliente = document.querySelector("[data-form]");

    formCadastroCliente.addEventListener("submit",
        event => {
            event.preventDefault()

            const nome = event.target.querySelector('[data-nome]').value
            const cpf = event.target.querySelector('[data-cpf]').value

            if (validaCPF(cpf)) {
                cadastrarClientes(nome, cpf)
            } else {
                alert('O CPF não é válido')
            }



        }
    );
}

export default eventoEnvia;

desde já agradeço se alguém poder me ajudar, abs

Boa noite, Gabriel. Eu estava com o msm problema e decidi olhar o rep github: https://github.com/alura-cursos/spa_js/blob/aula3/aula3/src/componentes/cadastro/cadastro-clientes.js

O prof esqceu de comentar que ele alterou o cadastro-clientes.js (trocou formCadastroCliente por form) .

Eu tb reparei que faltou export default das funções validaCPF e inicializaCadastro (não sei se faz falta mas eu botei tb)

Fala Gabriel, a solução da Radix deu certo? Se não deu, compartilha o seu projeto completo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Abraços

Obrigado Radix e Matheus pela atenção, a resposta foi mesmo a que o Radix colocou, não precisei nem exportar as duas outras funções.

Obrigado também porque agora vou ficar de olho no rep do Git se der algum erro.

Boa Gabriel, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.