[Bug] Erro no console do navegador | TypeScript Part 1: Evolving Your JavaScript

Meu código não está funcionando. Quando eu preencho o form e clico em "Incluir" na página da aplicação, não aparecem os dados corretos no console do navegador, mas aparece o seguinte erro no console: "app.js:2 Uncaught ReferenceError: exports is not defined at app.js:2:23". Vou deixar meu código aqui:

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>

<body class="container">

    <h1 class="text-center">Negociações</h1>

    <div id="mensagemView"></div>

    <form class="form">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus/>
        </div>

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>
    <br>
    <br>

    <script type="module" src="js/app.js"></script>
</body>
</html>

app.ts:

import { NegociacaoController } from "./controllers/negociacao-controller.js";

const controller = new NegociacaoController();
const form = document.querySelector('.form');
form.addEventListener('submit', evento => {
    evento.preventDefault();
    controller.adiciona();
})

negociacao-controller.ts:

import { Negociacao } from "../models/negociacao.js";

export class NegociacaoController {
    private inputData: HTMLInputElement;
    private inputQuantidade: HTMLInputElement;
    private inputValor: HTMLInputElement;

    constructor() {
        this.inputData = document.querySelector('#data');
        this.inputQuantidade = document.querySelector('#quantidade');
        this.inputValor = document.querySelector('#valor');
    }

    adiciona() {
        const expressaoRegular = /-/g;
        const date = new Date(this.inputData.value.replace(expressaoRegular, ','));
        const quantidade = parseInt(this.inputQuantidade.value);
        const valor = parseFloat(this.inputValor.value);
        const negociacao = new Negociacao(date, quantidade, valor);

        console.log(negociacao);
    }
}

negociacao.ts:

export class Negociacao {
    private _data: Date; 
    private _quantidade: number;
    private _valor: number;

    constructor(data: Date, quantidade: number, valor: number) {
        this._data = data;
        this._quantidade = quantidade;
        this._valor = valor;
    }

    get data() {
        return this._data;
    }

    get quantidade() {
        return this._quantidade;
    }

    get valor() {
        return this._valor;
    }

    get volume() {
        return this._quantidade * this._valor;
    }
}

Olá, Mylena! Tudo bem?

O erro que você está vendo, "Uncaught ReferenceError: exports is not defined", geralmente ocorre quando você está tentando usar módulos do Node.js no navegador, que não suporta o sistema de módulos CommonJS (usado pelo Node.js).

Certifique-se de que o seu arquivo tsconfig.json está configurado para gerar módulos ES6 em vez de CommonJS. Você pode fazer isso adicionando ou ajustando a seguinte configuração:

{
  "compilerOptions": {
    "module": "ES6", 
    "target": "ES6", 
    // outras opções...
  }
}

Depois de ajustar essas configurações, tente executar sua aplicação novamente.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Mergulhe em programação