I have this error while creating a webpage there is a part of this that webpage consisting a form in it but whenever I tried to open that form it shows this error –
RangeError: Maximum call stack size exceeded at Lexer.callLexerFunction (C:\Users\USER\Desktop\ansh_web\dance website\node_modules\pug-lexer\index.js:1642:23)
at Lexer.include (C:\Users\USER\Desktop\ansh_web\dance website\node_modules\pug-lexer\index.js:818:17)
at Lexer.callLexerFunction (C:\Users\USER\Desktop\ansh_web\dance website\node_modules\pug-lexer\index.js:1642:23)
at Lexer.advance (C:\Users\USER\Desktop\ansh_web\dance website\node_modules\pug-lexer\index.js:1667:12)
at Lexer.callLexerFunction (C:\Users\USER\Desktop\ansh_web\dance website\node_modules\pug-lexer\index.js:1642:23)
at Lexer.getTokens (C:\Users\USER\Desktop\ansh_web\dance website\node_modules\enter code herepug-enter code herelexer\index.js:1701:12)
at lex (C:\Users\USER\Desktop\ansh_web\dance website\node_modules\pug-lexer\index.js:12:42)
at Object.lex (C:\Users\USER\Desktop\ansh_web\dance website\node_modules\pug\lib\index.js:104:9)
at Function.loadString [as string] (C:\Users\USER\Desktop\ansh_web\dance website\node_modules\pug-load\index.js:53:24)
at C:\Users\USER\Desktop\ansh_web\dance website\node_modules\pug-load\index.js:37:27
Some part of my code is this it is js code and I’m a beginner so I don’t know how to solve this error.Please help meπ’π’π’… :
const express = require("express");
const path = require("path");
const app = express();
const port = 8000;
// Express specific stuffs
app.use('/static', express.static('static')) // For serving Static Files
app.use(express.urlencoded())
// Pug specific stuffs
app.set('view engine', 'pug') // set the template engine as pug
app.set('views', path.join(__dirname, 'views')) // set the views directory
// Endpoints
app.get('/', (req, res) => {
const params = {}
res.status(200).render('home.pug', params);
})
app.get('/contact', (req, res) => {
const params = {}
res.status(200).render('contact.pug', params);
})
// Start the server
app.listen(port, () => {
console.log(`The application started successfully on port ${port}`);
});
Here is my home.pug file
extends base.pug
block scripts
scripts(scr='/static/index.js')
block style
style
include ../static/style.css
block content
section#info
div Welcome To Anshs Dance Academy
div.small Eat,Sleep,Dance,Repeat...
section#mission
h2 Our Mission
div.card
h3 Dance Perfection
div.card-box
div.card-img
img(src="/static/img/img1.png")
div.card-content
p Lorem ipsum dolor sit amet.
div.card
h3 Dance the way you like
div.card-box
div.card-img
img(src="/static/img/img2.png")
div.card-content
p Lorem ipsum dolor sit amet.
div.card
h3 Expert teaching
div.card-box
div.card-img
img(src="/static/img/img3.png")
div.card-content
p Lorem ipsum dolor sit amet.
section#sponsersSection
h2 Our Sponsers
div#sponsers
img(src="/static/img/logo1.png", alt="sponsers images", class="spimg")
img(src="/static/img/logo2.png", alt="sponsers images", class="spimg")
img(src="/static/img/logo3.png", alt="sponsers images", class="spimg")
img(src="/static/img/logo4.png", alt="sponsers images", class="spimg")
Here is my contact.pug file
extends contact.pug
block scripts
scripts(scr='/static/index.js')
block style
style
include ../static/style.css
block content
H1 Contact Us
form(action="/contact", method= "post", class= "myForm")
input(type="text" class= "myname" name="name" placeholder="Enter your name..")
input(type="phone" class= "myInput" name="phone" placeholder="Enter your phone number..")
input(type="email" class= "myInput" name="email" placeholder="Enter your email..")
input(type="text" name="firstname" placeholder="Your name..")
button(class="btn")
| submit
From a stack trace it looks like one of your
*.pug
files includes another .pug file and you have circular dependency (A includes B, B includes A) so the server crashes.Looking at
contact.pug
I can see that it extends itself by mistake (first line should beextends base.pug
)