Não estou conseguindo reproduzir esse data-attribute | JavaScript na Web: manipule o DOM com JavaScript

                    data-attribute.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="index.css">
    <title>Data Attributes</title>
</head>
<body>
    <div class="container">
        <div class="abas">
            <button class="ativa" data-aba="entrar">Entrar</button>
            <button data-aba="cadastrar">Cadastre-se</button>
        </div>
    </div>

    <div class="conteudos">
        <div data-conteudo="entrar">
            <form class="form">
                <input type="email" name="email" placeholder="Seu e-mail">
                <input type="password" name="senha" placeholder="Sua Senha">
                <button>Entrar</button>
            </form>
        </div>
        <div class="hide" data-conteudo="cadastrar">
            <form class="form">
                <input type="email" name="email" placeholder="Seu e-mail">
                <input type="password" name="senha" placeholder="Sua Senha">
                <input type="password" name="senha" placeholder="Repita sua senha">
                <button>Cadastrar</button>
            </form>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

                index.css
.form button {
    padding: 10px;
    background-color: #E67817;
    border: none;
    outline: none;
    color: #fff;
    font-weight: bold;
}

.hide {
    display: none;
}

.abas .ativa {
    background-color: #E67817;
    color: #fff;
}

            index.js

(() => {
    const abas = document.querySelectorAll('[data-aba]')   

    esconderConteudos = () => {
        const conteudos = document.querySelectorAll('[data-conteudo]')

        conteudos.forEach(conteudo => conteudo.classList.add('hide'))
    }

    inativarAbas = () => {
        abas.forEach(aba => aba.classList.remove('ativa'))
    }

    abas.forEach(aba => aba.addEventListener('click', () => {
        const valor = aba.dataset.aba

        esconderConteudos()
        inativarAbas()
    }))

Gostaria de uma ajuda, pois estou tentando reproduzir o que a Juliana fez no vídeo, mas não estou conseguindo.

Oi, Raphael, beleza?

Busquei reproduzir o código da Juliana no Alura+ e me parece que faltou apenas fechar e chamar a função anônima no seu código do index.js. Para isso, basta adicionar esses caracteres })() ao final do código. O index.js ficará dessa forma aqui:

(() => {
    const abas = document.querySelectorAll('[data-aba]')   

    esconderConteudos = () => {
        const conteudos = document.querySelectorAll('[data-conteudo]')

        conteudos.forEach(conteudo => conteudo.classList.add('hide'))
    }

    inativarAbas = () => {
        abas.forEach(aba => aba.classList.remove('ativa'))
    }

    abas.forEach(aba => aba.addEventListener('click', () => {
        const valor = aba.dataset.aba

        esconderConteudos()
        inativarAbas()
    }))
})()

Depois é só completar com as funções ativarConteudo e ativarAba a partir dos 9m29s do vídeo.

Espero ter conseguido ajudá-lo. Bons estudos.