Não esta aceitando

quando coloco a palavra e pesquiso surge isso no console "buscaVideo.js:6 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'value') at buscaVideo (buscaVideo.js:6:70) at HTMLButtonElement. (buscaVideo.js:14:53)"

buscaVideos.js

import { conectaApi } from "./conectaApi.js";

async function buscaVideo(evento) {
    evento.preventDefault();

    const dadosDePesquisa = document.querySelector("[data-pesquisa]").value;
    const busca = await conectaApi.buscaVideo(dadosDePesquisa);

    console.log(busca);
}

const botaoDePesquisa = document.querySelector("[data-botao-pesquisa]");

botaoDePesquisa.addEventListener("click", evento => buscaVideo(evento));

conectaApi.js

async function listaVideos() {
    const conexao = await fetch("http://localhost:3000/videos");
    const conexaoConvertida = await conexao.json();

    return conexaoConvertida
}

async function criaVideo(titulo, descricao, url, imagem) {
    const conexao = await fetch("http://localhost:3000/videos", {
        method: "POST",
        headers: {
            "Content-type": "application/json"
        },
        body: JSON.stringify({
            titulo: titulo,
            descricao:`${descricao} mil visualizações.`,
            url: url,
            imagem: imagem
        })
    });

    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;
}

async function buscaVideo(termoDeBusca) {
    const conexao = await fetch(`http://localhost:3000/videos?q=${termoDeBusca}`);
    const conexaoConvertida = conexao.json();

    return conexaoConvertida;

}

export const conectaApi = {
    listaVideos,
    criaVideo,
    buscaVideo
}

index.html

<!DOCTYPE html>
<html lang="pt-br">

<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">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/estilos.css">
    <link rel="stylesheet" href="./css/flexbox.css">
    <title>AluraPlay</title>
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
</head>

<body>

    <header>

        <nav class="cabecalho">
            <a class="logo" href="./index.html"></a>

            <div class="cabecalho__pesquisar">

                <input type="search" placeholder="Pesquisar" id="pesquisar" class="pesquisar__input" data-pequisa>
                <button class="pesquisar__botao" data-botao-pesquisa>

            </div>

            <div class="cabecalho__icones">
                <a href="./pages/enviar-video.html" class="cabecalho__videos"></a>
            </div>
        </nav>

    </header>

    <ul class="videos__container" alt="videos alura" data-lista>

    </ul>
    <script src="./app/mostrarVideo.js" type="module"></script>
    <script src="./app/buscaVideo.js" type="module"></script>
</body>

</html>

Julio, não sei se já resolveu, mas você esqueceu de adicionar o termo "await" no seguinte trecho:

async function buscaVideo(termoDeBusca) {
    const conexao = await fetch(`http://localhost:3000/videos?q=${termoDeBusca}`);
    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;

}

Deixei em negrito para que note a diferença. Te explicando o que houve, o método .json irá converter os dados para o formato JSON, mas segundo a própria documentação (você pode ler mais clicando aqui), o retorno será um promisse, por isso é necessário utilizar o await novamente especificando que você irá esperar a resposta ser armazenada na variável, para então, utilizá-la.

Acredito que isso deva resolver, um abraço.

Não esta aceitando ".value" na const dadosDePesquisa

Chegou a hora de transformar