Error encountered in Jade rendering when attempting to run two scripts simultaneously: Uncaught SyntaxError: Unexpected token <

Here is a snippet from my index.jade file:

script(type="text/javascript")
  if user
    | window.user = !{user};
  else
    | window.user = 'null';
  if category
    | window.category = !{category};
  else
    | window.category = 'null';
  if postid
    | window.postid = !{postid};
  else
    | window.postid = 'null';
script(src="all.js")

After testing, I noticed that the variables user, category, and postid are correctly passed to Jade. However, upon rendering, an error occurs:

Uncaught SyntaxError: Unexpected token <

This error points to the beginning of the file, and strangely, the value of window.postid becomes "all.js". It seems like something is going wrong here. While the category and postid parameters are set using URL parameters, the website operates smoothly when no category or postid is specified ('/') or only the category is provided ('/:category'). Nonetheless, when both the category and postid are passed in ('/:category/:postid'), even though the postid data is properly sent to Jade, assigning this value to window.postid seems impossible without it being overwritten by the src value of the subsequent script tag.

Answer №1

During my investigation, I discovered that my render function was being executed three times - once with the correct postid value, and then twice more with all.css and all.js values. It seems that the Jade template was triggering additional GET requests for these files, resulting in their names being mistaken for postid.

I had initially hoped to manage my routing by passing URL parameters as variables to the main app at '/', such as /category/page being converted to category="category" and page="page". Unfortunately, this approach did not yield the desired outcome.

My next plan is to render index.jade for '/*' and handle URL routing on the frontend using hashes to achieve the effect I am looking for.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a problem with vis js events

While constructing a timeline in my vue.js application, I opted to utilize vis.js. Unfortunately, I encountered some issues when attempting to incorporate events. Initially, setting @drop="myDropCallback()" did not trigger the function upon dropping an ite ...

Creating personalized hooks that rely on React query requests

Utilizing a series of custom hooks, I am able to fetch data and perform various calculations based on that data. One particular hook calculates the total amount that should be set aside monthly for future expenses, using the output from previous data-fetch ...

Aligning images with absolute CSS to text that is wrapping positions the images perfectly alongside the text content

My webpage has a long content section that resizes based on the browser width. Here's an example: <h1 id="loc1">Title</h1> <p>bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bod ...

An unanticipated issue has arisen with the Alert Open Error. The command "browser.switchTo().alert().accept();" functions properly in Firefox, but encounters difficulties in Chrome while executing via Jenkins

Seeking assistance on how to resolve a specific error encountered in the Chrome browser while using Protractor. https://i.stack.imgur.com/7Fm4l.png The error message reads as follows: "UnexpectedAlertOpenError: unexpected alert open: {Alert text : There a ...

The refresh function in next/navigation's router is not functioning properly

In my component, I have an onSubmit function that should reload the page every time a task is added. However, despite not receiving any errors in the console and even sending the toast message, the page is not refreshing after the function is called. " ...

Incorporating and designing a side button using jQuery Mobile

I'm working on adding a button to the left side of the screen that is round (but not necessarily) and partially visible, with a visually appealing design. This button will allow users to open a side menu panel. Below is the HTML code for the button: ...

What is the best way to display nested JSON in JSX within a React Native application?

I need help with rendering nested JSON inside my JSX. Below is the JSON response: [{ "data": { "total_students": 13, "seats": "", "categories": [{ "id": 28, "name": "Economy", "slug": "econom ...

methods for accessing targeted information within mongodb

Currently, I have implemented the mean stack framework. Below is the database model I am using: var datas = mongoose.model('datas',{ username: string, password: string, email: string }); Here is the code for retrieving the data: ...

Node.JS: Combining Multiple Files into a Single Output File

Currently, I am in the process of building a data pipeline using Node.js. While I acknowledge that there are better ways to approach this, I am determined to implement it and make improvements as I go. Here's the scenario: I have a collection of gzi ...

Guide to implementing optional localization strings in React-Router paths

Incorporating react-router, I aim to implement internationalization for links following this format: domain.com/langISO/countryISO2/page Here are some examples of valid routes: domain.com/ -> Home Page domain.com/en/us -> Home Page domain.com/fr/f ...

Struggling with using the $.get method in JavaScript

As a JavaScript beginner, I've encountered an odd issue while working on a weather application. I initially managed to fetch weather data from this source using latitude and longitude values. However, after making some code modifications for additiona ...

How can one transform a web-based application into a seamless full-screen desktop experience on a Mac?

"Which software can be utilized to enable a web application to display an icon on the desktop of a Mac computer, while also opening up the web application in a fully immersive full-screen mode that supports all the touch and gesture functionalities provi ...

Using ngTouch for ng-click events on the body element can cause issues with links and input fields on mobile

Seeking assistance with a unique issue I am facing on my app-like website. I have implemented a swipable menu but I want it to close whenever the user taps outside the menu. I have tried using ngTouch for swiping and attached ng-click="menuToggled = false" ...

Utilizing res.send() in files other than Routes file

I am completely new to Node JS and Express, so please bear with me if this question seems a bit scattered. Within one of my routes, I am invoking a function from a separate module: var express = require('express'); var router = express.Router() ...

How to modify the color of the placeholder text in a select dropdown using Material-ui

I have a material-ui select component that displays a dropdown menu of options for the user to choose from. The placeholder text, which currently reads "select option," appears in light grey to prompt the user to make a selection. However, I am concerned t ...

Updating chart.js data seems to be presenting some challenges

Need help fetching data with an AJAX request to update chart.js. The AJAX request is working fine, but the response doesn't update the chart. This is how I fetch the data: <script type="text/javascript"> $(document).ready(function(){ $("#da ...

Transfer the address information to the billing address fields

I need assistance with copying the user's address to the billing address fields based on a checkbox value. Currently, when the checkbox is checked, only the last input field value is being copied over to the billing address section. It is crucial that ...

Using a string as a query parameter in Javascript/AngularJS

Hey there! I have a username that I'm passing to retrieve a record from the database. Here's what I have in my controller: $scope.team=function(data) team_factory.getMember.query({}, data.username, function(data){ $scope.team=data; }); And ...

The use of Handlebars expressions within the {{#each}} block is crucial

I am currently working on my new portfolio site and I have a question about how to place handlebars expressions inside an #each loop. The project is an express application generated by express-generator, and I am using the express-handlebars NPM package: ...

Explaining the functionality of next() in ExpressIn this article

Understanding why we use next() in expressjs in theory seems clear: :) In reality, routing methods can have multiple callback functions as arguments. When using multiple callbacks, it is crucial to include next as an argument in the callback function and ...