4
respostas

Erro de MIME

Referente ao curso JavaScript na Web: manipule o DOM com JavaScript, no capítulo Remover tarefa e atividade Criando módulos

por Daniela Oliveira Caus
| 45.4k xp | 13 posts

Com o passo-a-passo da parte 3 da aula 5, recebi um erro do Firefox de "MIME", que me direcionava para a página https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options.

Não consegui entender o erro... Aparentemente o navegador estava interpretando que os módulos json eram do tipo "text/html", o que não é permitido.

Depois disso, executei o "npm init" no console do VS Code (o que aprendi em outra aula por aqui), criando um arquivo package.json, o que resolveu meu problema.

Não sei se fiz algo errado e o erro aconteceu só comigo... não entendi o motivo disso ter acontecido.

Seguem meus códigos:

main.js

import BotaoConclui from "./assets/js/botaoConclui.js"
import BotaoDeletar from "./assets/js/botaoDelete.js"

const CriarTarefa = (evento) => {
    evento.preventDefault()
    const lista = document.querySelector('[data-list]')
    const input = document.querySelector('[data-form-input]')
    const novaTarefa = input.value

    const tarefa = document.createElement('li')
    tarefa.classList.add('task')
    const conteudo = `<p class="content">${novaTarefa}</p>`

    tarefa.innerHTML = conteudo

    tarefa.appendChild(BotaoConclui())
    tarefa.appendChild(BotaoDeletar())
    lista.appendChild(tarefa)
    input.value = " "
}

const novaTarefa = document.querySelector('[data-form-button]');
novaTarefa.addEventListener('click', CriarTarefa)

botaoConclui.js, dentro da pasta "assets/js"

const BotaoConclui = () => {
    const botaoConclui = document.createElement('button')

    botaoConclui.classList.add('check-button')
    botaoConclui.innerText = 'Concluir'

    botaoConclui.addEventListener('click', ConcluirTarefa)

    return botaoConclui
}


const ConcluirTarefa = (evento)=> {
    const botaoConclui = evento.target

    botaoConclui.parentElement.classList.toggle('done')
}

export default BotaoConclui

botaoDelete.js, dentro da pasta "assets/js"

const BotaoDeletar = ()=> {
    const botaoDeletar = document.createElement('button')

    botaoDeletar.classList.add('delete-button')
    botaoDeletar.innerText = 'Deletar'
    botaoDeletar.addEventListener('click', DeletarTarefa)

    return botaoDeletar
}

const DeletarTarefa = (evento)=> {
const botaoDeletar = evento.target
botaoDeletar.parentElement.remove()
}

export default BotaoDeletar
4 respostas
por Mateus Henrique
| 997.4k xp | 1546 posts
Instrutor

Fala Daniela, tudo bem?

Executei o seu código aqui e não retornou esse erro, conseguiria simular o erro novamente e nos enviar uma print? Mas geralmente isso ocorre quando se coloca o caminho errado da importação.

Aguardo o seu retorno :)

por João Victor Porto
| 43.6k xp | 2 posts

Terminei todos os passos da aula e estou com esse mesmo problema. Alguém sabe resolver? Os arquivos podem ser acessados pelo GitHub: https://github.com/jv-porto/tarefas. Também vou deixar prints abaixo: index.html

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=BioRhyme&family=Space+Mono&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <title>Tarefas</title>
  </head>
  <body>
    <div class="app">
      <div class="todo-list">
        <h1 class="title">
          Tarefas
        </h1>
        <form class="form" action="">
          <input class="form-input" type="text" data-form-input>
          <button class="form-button" data-form-button> Novo Item </button>
        </form>
        <ul class="list" data-list>
        </ul>
      </div>
    <script type="module" src="main.js"></script>
  </body>
</html>

main.js

import BotaoConcluir from './components/concluirTarefa.js';
import BotaoDeletar from './components/deletarTarefa.js';

const novaTarefa = document.querySelector('[data-form-button]');
const criarTarefa = (evento) => {
    evento.preventDefault();

    const lista = document.querySelector('[data-list]');
    const input = document.querySelector('[data-form-input]');
    const valorInput = input.value;

    const tarefa = document.createElement('li');
    tarefa.classList.add('task');
    const conteudo = `<p class="content">${valorInput}</p>`;

    tarefa.innerHTML = conteudo;

    tarefa.appendChild(BotaoConcluir());
    tarefa.appendChild(BotaoDeletar());

    lista.appendChild(tarefa);

    input.value = "";
}

novaTarefa.addEventListener('click', criarTarefa);

concluirTarefa.js

const BotaoConcluir = () => {
    const botaoConcluir = document.createElement('button');

    botaoConcluir.classList.add('check-button');
    botaoConcluir.innerText = 'concluir';

    botaoConcluir.addEventListener('click', concluirTarefa);
    return botaoConcluir;
}
const concluirTarefa = (evento) => {
    const botaoConcluir = evento.target;
    const tarefaCompleta = botaoConcluir.parentElement;
    tarefaCompleta.classList.toggle('done');
}

export default BotaoConcluir;

deletarTarefa.js

const BotaoDeletar = () => {
    const botaoDeletar = document.createElement('button');
    botaoDeletar.innerText = 'deletar';
    botaoDeletar.addEventListener('click', deletarTarefa)
    return botaoDeletar
}
const deletarTarefa = (evento) => {
    const botaoDeletar = evento.target;
    const tarefaCompleta = botaoDeletar.parentElement;
    tarefaCompleta.remove();
}

export default BotaoDeletar;

Erro do console no Firefox:

por Mateus Henrique
| 997.4k xp | 1546 posts
Instrutor

Fala João Vitor tudo bem?

O problema ocorre pois você importou BotaoConcluir e BotaoDeletar de uma pasta que não existe, que no caso foi components e a pasta que existe no seu projeto se chama componentes:

Talvez sirva como resposta para o seu problema também Daniela!

por João Victor Porto
| 43.6k xp | 2 posts

Nossa, nem tinha percebido! Muito obrigado :)