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
}
}
}
});