Not defined error in Node.js + Express.js + Ejs project

Question

I'm building website based on node.js(express.js), MYSQL and Ejs.

And I was trying to present graph with d3.js

This is part of script in mainpage.ejs

    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script>
       
        const yearData = <%- JSON.stringify(yearData) %>;

        const yearChartWidth = 600;
        const yearChartHeight = 400;
        const margin = { top: 20, right: 20, bottom: 30, left: 40 };

        const svg = d3.select('#yearChart')
            .append('svg')
            .attr('width', yearChartWidth + margin.left + margin.right)
            .attr('height', yearChartHeight + margin.top + margin.bottom)
            .append('g')
            .attr('transform', `translate(${margin.left}, ${margin.top})`);

        const xScale = d3.scaleBand()
            .domain(yearData.map(d => d.year))
            .range([0, yearChartWidth])
            .padding(0.1);

        const yScale = d3.scaleLinear()
            .domain([0, d3.max(yearData, d => d.count)])
            .range([yearChartHeight, 0]);

        svg.selectAll('.bar')
            .data(yearData)
            .enter()
            .append('rect')
            .attr('class', 'bar')
            .attr('x', d => xScale(d.year))
            .attr('y', d => yScale(d.count))
            .attr('width', xScale.bandwidth())
            .attr('height', d => yearChartHeight - yScale(d.count))
            .attr('fill', 'steelblue');

        svg.append('g')
            .attr('transform', `translate(0, ${yearChartHeight})`)
            .call(d3.axisBottom(xScale));

        svg.append('g')
            .call(d3.axisLeft(yScale));
    </script>

And this is part of server code, server.js

app.get('/', (req, res) => {
  
  const yearQuery = `SELECT release_year, COUNT(*) AS count FROM movies GROUP BY release_year`;

  let yd = [];

  connection.query(yearQuery, (err, yearResults) => {
    if (err) {
      console.error('Error fetching year data:', err);
      return res.status(500).send('Internal Server Error');
    }

    yd = yearResults.map(row => ({
      year: row.release_year,
      count: row.count
    }));

    res.render('mainpage', { yearData: yd, session: req.session });
  });
});

And then, I get this error code:

ReferenceError: C:\Users\harry\Desktop\IWD Assignment\views\mainpage.ejs:78
    76|     <script>

    77|         

 >> 78|         const yearData = <%- JSON.stringify(yearData) %>;

    79| 

    80|         

    81|         const yearChartWidth = 600;


yearData is not defined
    at eval (eval at compile (C:\Users\harry\Desktop\IWD Assignment\node_modules\ejs\lib\ejs.js:673:12), <anonymous>:30:32)
    at mainpage (C:\Users\harry\Desktop\IWD Assignment\node_modules\ejs\lib\ejs.js:703:17)
    at tryHandleCache (C:\Users\harry\Desktop\IWD Assignment\node_modules\ejs\lib\ejs.js:274:36)
    at exports.renderFile [as engine] (C:\Users\harry\Desktop\IWD Assignment\node_modules\ejs\lib\ejs.js:491:10)
    at View.render (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\view.js:135:8)
    at tryRender (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\application.js:657:10)
    at Function.render (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\application.js:609:3)
    at ServerResponse.render (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\response.js:1049:7)
    at C:\Users\harry\Desktop\IWD Assignment\server.js:61:7
    at Layer.handle [as handle_request] (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\router\layer.js:95:5)

I thought it would be problem caused by wrong variable connection, however, I couldn't find where I wrongly set the code.

Could you find any wrong point that cause error?

I thought it would be problem caused by wrong variable connection, however, I couldn't find where I wrongly set the code. (I was modifying res.render() part in server.js but it still have same error.)

Could you find any wrong point that cause error?

I set up server.js as this:

const express = require('express');
const mysql = require('mysql');
const session = require('express-session');
const MySQLStore = require('express-mysql-session')(session);
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const path = require('path');

const app = express();

var options = {
  host: 'localhost',
  user: 'root',
  password: '1019',
  database: 'user'
};

var sessionStore = new MySQLStore(options);

app.use(session({
  secret: 'my key',
  resave: false,
  saveUninitialized: true,
  store: sessionStore
}));

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '1019',
  database: 'user',
  port: '3306',
});

app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

app.listen(3000, () => {
  connection.connect();
  console.log('Server is running on port 3000!');
});

Even I cannot get console.log(yd) since it doesn't come out anything

PS C:\Users\harry\Desktop\IWD Assignment> node server.js
Server is running on port 3000!
ReferenceError: C:\Users\harry\Desktop\IWD Assignment\views\mainpage.ejs:78
    76|     <script>
    77|         
 >> 78|         const yearData = <%- JSON.stringify(yearData) %>;
    79| 
    80|         
    81|         const yearChartWidth = 600;

yearData is not defined
    at eval (eval at compile (C:\Users\harry\Desktop\IWD Assignment\node_modules\ejs\lib\ejs.js:673:12), <anonymous>:30:32)
    at mainpage (C:\Users\harry\Desktop\IWD Assignment\node_modules\ejs\lib\ejs.js:703:17)
    at tryHandleCache (C:\Users\harry\Desktop\IWD Assignment\node_modules\ejs\lib\ejs.js:274:36)
    at exports.renderFile [as engine] (C:\Users\harry\Desktop\IWD Assignment\node_modules\ejs\lib\ejs.js:491:10)
    at View.render (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\view.js:135:8)
    at tryRender (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\application.js:657:10)
    at Function.render (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\application.js:609:3)
    at ServerResponse.render (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\response.js:1049:7)
    at C:\Users\harry\Desktop\IWD Assignment\server.js:62:7
    at Layer.handle [as handle_request] (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\router\layer.js:95:5)
ReferenceError: C:\Users\harry\Desktop\IWD Assignment\views\mainpage.ejs:78
    76|     <script>
    77|         
 >> 78|         const yearData = <%- JSON.stringify(yearData) %>;
    79|
    80|         
    81|         const yearChartWidth = 600;

yearData is not defined
    at eval (eval at compile (C:\Users\harry\Desktop\IWD Assignment\node_modules\ejs\lib\ejs.js:673:12), <anonymous>:30:32)
    at mainpage (C:\Users\harry\Desktop\IWD Assignment\node_modules\ejs\lib\ejs.js:703:17)
    at tryHandleCache (C:\Users\harry\Desktop\IWD Assignment\node_modules\ejs\lib\ejs.js:274:36)
    at exports.renderFile [as engine] (C:\Users\harry\Desktop\IWD Assignment\node_modules\ejs\lib\ejs.js:491:10)
    at View.render (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\view.js:135:8)
    at tryRender (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\application.js:657:10)
    at Function.render (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\application.js:609:3)
    at ServerResponse.render (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\response.js:1049:7)
    at C:\Users\harry\Desktop\IWD Assignment\server.js:62:7
    at Layer.handle [as handle_request] (C:\Users\harry\Desktop\IWD Assignment\node_modules\express\lib\router\layer.js:95:5)

I tried in vane to replicate your error. I cut/pasted your code and only modified it to use mssqlserver instead of mysql. As @SobowaleBukola hints at below, I'm pretty sure your app.get('/'...) is not getting executed. What URL are you using in the web-browser? Have you loaded up your app.get callback with console.logs to ensure it gets into the callback? That is gets past the connection? To the query? — Mark
– Mark, Commented Oct 12, 2024 at 16:09

Sobowale Bukola · Accepted Answer · 2024-10-09 15:55:13Z

1

This is seeming like an issue with your EJS setup. You need to have this at the top of the server.js file. If this is not done, the yearData variable will not be passed to the view

const path = require('path');
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

your-project/
  ├── server.js
  ├── views/
  │   └── mainpage.ejs
  ├── node_modules/
  └── package.json

Kindly post if the issue persists after doing this

edited Oct 9, 2024 at 15:55

answered Oct 9, 2024 at 15:50

Sobowale Bukola

3611 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mkbmob1004 Over a year ago

Hello, all those settings were already set up but caused error, ;-;

Sobowale Bukola Over a year ago

` yd = yearResults.map(row => ({ year: row.release_year, count: row.count }));` can you console.log yd after this line and check the result.

mkbmob1004 Over a year ago

I wrote console.log(yd) after ` yd = yearResults.map(row => ({ year: row.release_year, count: row.count }));` and ran 'node server.js' on cmd but I couldn't see any log.

Sobowale Bukola Over a year ago

Can you confirm the database is connected

mkbmob1004 Over a year ago

Sure, I have another function to bring information from database and display to website and it was successful

Collectives™ on Stack Overflow

Not defined error in Node.js + Express.js + Ejs project

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related