0

Eu estou tentando renderizar em ExpressJs uma página ejs que tenha uma tag <script type="module" href="script/grafico.js">. Essa tag conecta a página a um código em javascript que mostrará ao usuário um gráfico da biblioteca "chart.js". Eu adoraria muito usar a biblioteca sem ter de escrever o código dentro do html da página, por causa das boas práticas e também para a limpeza do sistema, mas até agora não tive sucesso.

Não tenho permissão para adicionar imagens, mas deixo um link a respeito da disposição das pastas do meu projeto

Segue meu arquivo package.json:

{
  "name": "expressjs---module",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "type": "module",
  "license": "ISC",
  "dependencies": {
    "chart.js": "^4.4.2",
    "ejs": "^3.1.10",
    "express": "^4.19.2",
    "nodemon": "^3.1.0"
  }
}

Segue também o meu arquivo do servidor server.js. Veja que sua única função basicamente é renderizar o arquivo graph.ejs, que é a página que tento usar a biblioteca chart.js:

import express from "express";

const app = express();
app.set("view engine", "ejs");
app.use(express.static("public"));

app.get("/", (req, res) => {
    res.render("graph")
})

const port = 3000;
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`);
  })

No fim, eu gostaria que a página graph.ejs conseguisse chamar por meio da tag <script type="module" href="script/grafico.js">.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graph</title>
</head>
<body>
    <div>
        <canvas id="graph"></canvas>
    </div>

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

Entretanto, quando requisitado, o código graph.js simplesmente não consegue fazer o uso da biblioteca, pois resulta no seguinte erro: Failed to load resource: the server responded with a status of 404 (Not Found). Segue o arquivo:

import {Chart} from "../../node_modules/chart.js/auto"
const graph = document.getElementById("graph");

new Chart(graph, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .