1
resposta

Projeto não funciona no Chrome

Olá, apenas por curiosidade, estou seguindo as aulas e estudos desse curso, porem nessa aula, quando voltei depois de um dia tento trabalhado nele, o projeto simplesmente parou de funcionar no Chrome. Digo Chrome porque quando abro no Safari tudo ainda está perfeito, consigo adicionar tarefas, o botão de adicionar tarefas abre normalmente a textarea pra escrever a tarefa e inclusive o que foi aplicado nesse curso está funcionando. Porem, quando aberto no Chrome, nada funciona e o console retorna esse problema:

Uncaught SyntaxError: Unexpected token 'u', "function st"... is not valid JSON at JSON.parse () at script-crud.js:7:22 (anonymous) @ script-crud.js:7

Apontando para o seguinte trecho do código:

const tarefas = JSON.parse(localStorage.getItem('tarefas')) || [];

Já procurei o erro em relação ao arquivo do instrutor disponibilizado no github e até download mas não consegui encontrar o erro. Sendo assim, baixei o arquivo do projeto e rodei no meu vscode, quando abri um Live Server do projeto baixado tudo estava perfeito e funcionando perfeitamente no Live Server, então, comentei todo o meu código no meu arquivo, copiei e colei o código do arquivo do professor no meu, e ainda não funcionou.

Sendo assim, por curiosidade eu estou vindo aqui ver se alguem tem alguma idéia do que está acontecendo, se pode ser um problema do próprio Chrome, até porque no Safari o meu arquivo funciona perfeitamente, porem apenas o Chrome me passa esse erro no console, e não apenas o erro mas como nada funciona, nem se quer o textarea aparece quando clico no botão de adicionar tarefa.

Importante dizer que todos os campos foram adicionados no HTML e que o mesmo processo foi feito com o arquivo HTML pra ter certeza que ali não tinha problemas, e ainda insisto, no Safari tudo funciona perfeitamente.

Segue o código apenas pra confirmação:

const btnAdicionarTarefa = document.querySelector('.app__button--add-task');
const formAdicionarTarefa = document.querySelector('.app__form-add-task');
const textarea = document.querySelector('.app__form-textarea');
const ulTarefas = document.querySelector('.app__section-task-list');
const btnCancelar = document.querySelector('.app__form-footer__button--cancel');

const tarefas = JSON.parse(localStorage.getItem('tarefas')) || [];

function atualizarTarefas() {
    localStorage.setItem('tarefas', JSON.stringify(tarefas));
}

function criarElementoTarefa(tarefa) {
    const li = document.createElement('li');
    li.classList.add('app__section-task-list-item');

    const svg = document.createElement('svg');
    svg.innerHTML = `
        <svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="12" fill="#FFF"></circle>
            <path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#01080E"></path>
        </svg>
    `

    const paragrafo = document.createElement('p');
    paragrafo.textContent = tarefa.descricao;
    paragrafo.classList.add('app__section-task-list-item-description');

    const botao = document.createElement('button');
    botao.classList.add('app_button-edit');

    botao.onclick = () => {
        // debugger
        const novaDescricao = prompt("Qual é o novo nome da tarefa?");
        if(novaDescricao) {
            paragrafo.textContent = novaDescricao;
            tarefa.descricao = novaDescricao;
            atualizarTarefas();
        }
    };

    const imagemBotao = document.createElement('img');
    imagemBotao.setAttribute('src', '/imagens/edit.png');
    botao.append(imagemBotao);

    li.append(svg);
    li.append(paragrafo);
    li.append(botao);

    return li;
}

btnAdicionarTarefa.addEventListener('click', () => {
    formAdicionarTarefa.classList.toggle('hidden');
});

formAdicionarTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault();
    const tarefa = {
        descricao: textarea.value
    }
    tarefas.push(tarefa);
    const elementoTarefa = criarElementoTarefa(tarefa);
    ulTarefas.append(elementoTarefa);
    atualizarTarefas();
    textarea.value = '';
    formAdicionarTarefa.classList.add('hidden');
});

tarefas.forEach(tarefa => {
    const elementoTarefa = criarElementoTarefa(tarefa);
    ulTarefas.append(elementoTarefa);
});
1 resposta

E aí!

const tarefas = JSON.parse(localStorage.getItem('tarefas')) || [];
  • Abra o console no Chrome (F12 ou Ctrl+Shift+J) e digite localStorage.getItem('tarefas') para ver o que está armazenado nessa chave. Certifique-se de que o conteúdo é um JSON válido.

  • Você pode ter um JSON inválido armazenado. Limpe o localStorage no Chrome para garantir que você esteja começando do zero.

  • Ve se o valor retornado do localStorage não é null ou undefined antes de chamar JSON.parse. Se for, defina tarefas como um array vazio.

const storedData = localStorage.getItem('tarefas');
const tarefas = storedData ? JSON.parse(storedData) : [];
  • Às vezes, há diferenças sutis na implementação do JavaScript entre navegadores. Verifique se há algo específico no código que pode estar causando um problema específico no Chrome.

Dê uma olhada nesses pontos e veja se algum deles resolve o problema.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software