Uncaught SyntaxError: Cannot use import statement outside a module

Olá, após tentar fazer os imports/exports está dando o seguinte erro no meu console: Uncaught SyntaxError: Cannot use import statement outside a module, segue abaixo meu código:

import BotaoConcluirTarefa from "./componentes/concluiTarefa.js";
import BotaoDeletaTarefa from "./componentes/deletaTarefa.js";

const criarTarefa = (evento) => {
  evento.preventDefault(); //evita que a página seja recarregada a cada novo clique do botão

  const lista = document.querySelector("[data-list]"); //pega a ul
  const input = document.querySelector("[data-form-input]"); //pega o input
  const valor = input.value; //variável que pegará o valor (texto) dentro do input
  const tarefa = document.createElement("li"); //cria um elemento no HTML, nesse caso uma li
  tarefa.classList.add("task"); //informa a classe da li, para que ela possa receber os estilos definidos no CSS
  const conteudo = `<p class="content">${valor}</p>`; //define o valor (texto) no parágrafo

  tarefa.innerHTML = conteudo; //define que a li criada terá o parágrafo (innerHTML permite criação no HTML)

  tarefa.appendChild(BotaoConcluirTarefa()); //adiciona o botão conclui dentro da li
  tarefa.appendChild(BotaoDeletaTarefa()); //adiciona o botão deleta dentro do li
  lista.appendChild(tarefa); //adiciona uma nova li dentro da ul, sempre no último nó, sendo assim cada nova li ficará abaixo da última adicionada

  input.value = ""; //limpa o input após o clique
};

//adição de tarefa após clique do botão
const novaTarefa = document.querySelector("[data-form-button]"); //pega o botão Novo Item
novaTarefa.addEventListener("click", criarTarefa);

//MÓDULO DE CONCLUIR TAREFA
//conclue uma tarefa
const concluirTarefa = (evento) => {
  const botaoConclui = evento.target; //descobre qual elemento foi clicado da li
  const tarefaCompleta = botaoConclui.parentElement; //pega o pai do elemento
  tarefaCompleta.classList.toggle("done"); //adiciona a classe done no momento que o botão for clicado, que adiciona o efeito de risco na tarefa concluída, se clicar novamente ele remove a classe done
};

//botão de concluir tarefa
const BotaoConcluirTarefa = () => {
  const botaoConclui = document.createElement("button"); //cria o botão de concluir
  botaoConclui.classList.add("check-button"); //adiciona a classe para pegar as definições do CSS
  botaoConclui.innerText = "concluir"; //adiciona o texto "concluir" ao botão
  botaoConclui.addEventListener("click", concluirTarefa); //ao ser clicado, irá chamar a função concluirTarefa

  return botaoConclui; //ele é retornado para que o botão possa ser adicionado no CriarTarefa
};

export default BotaoConcluirTarefa;


//MÓDULO REMOÇÃO DE TAREFA
//remoção da tarefa
const deletarTarefa = (evento) => {
  const botaoDeleta = evento.target; //identifica qual botão foi clicado
  const tarefaCompleta = botaoDeleta.parentElement;

  tarefaCompleta.remove(); //remove a li clicada

  return botaoDeleta;
};

//botão de deletar tarefa
const BotaoDeletaTarefa = () => {
  const botaoDeleta = document.createElement("button"); //cria o botão
  botaoDeleta.innerText = "deletar"; //texto do botão
  botaoDeleta.addEventListener("click", deletarTarefa); //execute deletarTarefa ao clicar no botão

  return botaoDeleta; //ele é retornado para que o botão possa ser adicionado no CriarTarefa
};

export default BotaoDeletaTarefa;