Erro ao usar o Toast do materialize-cc

Código do meu Formulario.js ...

import React, { Component } from 'react';
import FormValidator from './FormValidator.js';
import PopUp from './PopUp.js';

import styled from 'styled-components';

const Container = styled.div`
  text-align: center;
`;

class Formulario extends Component {

    /* Criaremos também um constructor(), afinal, como temos um formulário no qual 
       dados serão inseridos, iremos alterar o estado de um elemento. Nesse 
       construtor, receberemos os props e os passaremos para o Component com o 
       super(). Criaremos então um stateInicial, um objeto com o estado inicial do 
       nosso formulário, no qual todos os campos estarão vazios. Por fim, setaremos 
       o state com esse stateInicial. */
    constructor(props) {
        super(props);

        this.validador = new FormValidator([
            {
                campo: 'nome',
                metodo: 'isEmpty',
                validoQuando: false, // Qdo o método isEmpty é válido ? Qdo for false.
                mensagem: 'Entre com um nome'
            },
            {
                campo: 'livro',
                metodo: 'isEmpty',
                validoQuando: false,
                mensagem: 'Entre com um livro'
            },
            {
                campo: 'preco',
                metodo: 'isInt',
                args: [{ min: 0, max: 99999 }],
                validoQuando: true, // Qdo o método isInt é válido ? Qdo for true.
                mensagem: 'Entre com um valor numérico'
            }
        ]);

        this.stateInicial = {
            nome: '',
            livro: '',
            preco: '',
            validacao: this.validador.valido()
        }

        this.state = this.stateInicial;
    }

    // Método para escutar eventos de input
    escutadorDeInput = event => {
        const { name, value } = event.target;

        this.setState({
            [name]: value
        });
    }

    // Método para submeter novo autor ao formulário
    submitFormulario = () => {

        const validacao = this.validador.valida(this.state);

        if (validacao.isValid) {
            this.props.escutadorSubmit(this.state);
            this.setState(this.stateInicial);
        } else {
            const {nome, livro, preco} = validacao;
            const campos = [nome, livro, preco];

            const camposInvalidos = campos.filter(elem => {
                return elem.isInvalid;
            });

            camposInvalidos.forEach(campo => {
                    PopUp.exibeMensagem('error', campo.mensagem);
            });                        
        }

    }

    render() {

        const { nome, livro, preco } = this.state;

        return (
            /* Repare que no formulário temos a palavra 'for', que é uma palavra 
               reservada do JavaScript, e que não poderemos utilizar no JSX. 
               Sendo assim, vamos alterá-la para o equivalente 'htmlFor'. */
            <form>

                <div className="row">
                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="nome">Nome</label>
                        <input
                            className="validate"
                            id="nome"
                            type="text"
                            name="nome"
                            value={nome}
                            onChange={this.escutadorDeInput}
                        />
                    </div>

                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="livro">Livro</label>
                        <input
                            className="validate"
                            id="livro"
                            type="text"
                            name="livro"
                            value={livro}
                            onChange={this.escutadorDeInput}
                        />
                    </div>

                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="preco">Preço</label>
                        <input
                            className="validate"
                            id="preco"
                            type="text"
                            name="preco"
                            value={preco}
                            onChange={this.escutadorDeInput}
                        />
                    </div>
                </div>

                <Container>
                    <button className="waves-effect waves-light blue lighten-2 btn"
                        onClick={this.submitFormulario} type="button">Salvar</button>
                </Container>

            </form >

        )

    }

}

export default Formulario;

Fala ai Alexandre, tudo bem? Parece que o toast precisa do jQuery para funcionar, já tentou realizar a instalação e importação do mesmo? Talvez resolva o problema.

Espero ter ajudado.

Tudo bem Matheus !

Não tentei ... Como faço para instalar e importar o jQuery !?

Tentou reinstalar o materialize com a mesma versão da aula? Fez a alteração que tem na errata logo depois? Alguém teve esse mesmo problema e, neste caso, era o que estava na errata.

https://cursos.alura.com.br/forum/topico-erro-na-exibicao-do-popup-cannot-read-property-jquery-of-undefined-89996

 Olá Matheus, 

 eu realizei a instalação do JQuery. Contudo, não sei se fiz a importação correta do mesmo no arquivo PopUp.js ... Eu coloquei assim: import 'jquery';

Após instalação e importação o problema continua. 

Boa tarde Alexander !

Reinstalei a versão 1.0.0 do materialize-css, a errata já tinha alterado para a forma correta. Mesmo tomando essas ações o erro continua.

Não sei mais o que fazer ! Os erros que os demais colegas tiveram aqui no fórum a respeito eu já tentei e não deu certo.

Se puder Alexandre, envia seu projeto aqui, para que eu possa baixá-lo e executá-lo aqui na minha máquina e ver se ocorrem os mesmos erros.

Alexander,

posso sim. Como o pessoal aqui nos fóruns da Alura fazem para anexar arquivos ? Caso não dê, eu posso lhe enviar por email ...

Pode ser um link de git, ou, pode mandar para alexander@aldesenvolvimento.com.br.

Alexander, enviei o link para o e-mail indicado ...

Recebi Alexandre, e o sistema rodou de boa aqui. Só abriu com um erro no arquivo ApiService, na linha 27, pois o body da requisição recebia a variável autor e deveria receber o id. Fiz o ajuste e o sistema abriu normalmente. Enviei um print para seu e-mail. Ou seja, aparentemente o erro pode estar na sua máquina e não no projeto. Procure reinstalar o Node, o NPM, quem sabe até iniciar um novo projeto e depois copiar os arquivos do seu atual.

Uma forma de você ter certeza que é alguma configuração na sua máquina, é baixar o próprio projeto que é disponibilizado no início de cada módulo, se eles apresentarem o mesmo problema, é a configuração do seu ambiente.

Seguem as configurações do meu ambiente para informação.

S.O: Linux Mint 19.3 NodeJs: 12.18.3 NPM: 6.14.5

Os plugins/extensões utilizadas no curso foram baixadas com as versões solicitadas no curso.

    Boa noite Alexander,

    isso mesmo tinha esse erro na ApiService, esqueci de corrigir aqui e mandei assim mesmo para ti ...

    Baixei o próprio projeto que é disponibilizado no início de cada módulo do curso, como havia sugerido, e após testar no meu ambiente (S.O.: Linux Mint 19.3 Cinnamon; NodeJS v. 13.5.0 e NPM: 6.14.7) continuou o problema. Como havias previsto, problema na configuração do meu ambiente.

    Então,  criei um novo projeto com o NodeJS: 14.5.0  (que veio com o NPM: 6.14.5) . Dentro da pasta do novo projeto eu renomeie a pasta /src e em seguida peguei a pasta /src do projeto antigo, que estava dando erro, e transferi para o novo projeto. Quando tentei iniciar o projeto houve alguns erros por não haver algumas bibliotecas instaladas. Instalei elas e na próxima tentativa de iniciação, funcionou ! 

    Agradeço pela ajuda Alexander !

Que maravilha Alexandre, pelo jeito era a versão do NodeJs mesmo.