Issue with Backbone: Unable to access property 'fn' as it is undefined

When I attempt to run the code below, I encounter an error that says "Cannot read property 'fn' of undefined" due to jquery not being found.

requirejs.config({
  baseUrl: "/static/javascript",
  paths: {
    jquery: "vendor/jquery",
    underscore: "vendor/underscore"
  },
  shim: {
    underscore: {
      exports: "_"
    }
} });
require(["underscore","jquery"],function(un){


    console.log("jQuery version: ", $.fn.jquery);
    console.log("underscore identity call: ", _.identity(5));
  console.log("underscore identity call: ", un.identity(5));
});

Strangely enough, modifying the code like this allows it to work:

requirejs.config({
  paths: {
    jquery: "vendor/jquery",
    underscore: "vendor/underscore"
  },
  shim: {
    underscore: {
      exports: "_"
    }
} });
require(["underscore","vendor/jquery"],function(un){


    console.log("jQuery version: ", $.fn.jquery);
    console.log("underscore identity call: ", _.identity(5));
  console.log("underscore identity call: ", un.identity(5));
});

Surprisingly, this change solved the issue. Despite both codes having the same path, my system seems to have trouble with the baseURL. What could be causing this and what is wrong with the initial code?

Answer №1

Ensure you declare the global variable you intend to use in this section

require(["underscore","jquery"],function(un, $ /* <- insert here */){

console.log("jQuery version: ", $.fn.jquery); // <- so here $ exists, $.fn too

In the second scenario, it functions because I assume that jQuery, Backbone, Underscore automatically register themselves using the global functions $, _, etc.., even when utilized with RequireJS shims.

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

I wish for the value of one input field to always mirror the value of another input field

There is a checkbox available for selecting the billing address to be the same as the mailing address. If the checkbox is checked, both values will remain the same, even if one of them is changed. Currently, I have successfully achieved copying the mailing ...

Connect an angular directive template to an event

In my Angular directive, the template structure is as follows: <Button id="testBtn">Test me<button> Within the directive controller, I have defined API functions for the directive. Now, I need to send an event to the parent module when the bu ...

Automatically populating state and city fields with zip code information

Starting out in the world of web development, I encountered a challenge with a registration form I'm constructing for our company. For guidance, I referred to this resource: http://css-tricks.com/using-ziptastic/. This project marks my initial interac ...

The data in my JSON string is not fully received through the HTTP GET request

Whenever I send my array to the PHP file, it receives incomplete data. The content of my 'arr' variable is as follows: [["╪▒┘à┘╛┘╪د","67126881188552864","Empty,Empty,Empty,Empty,8644,-360,-4,8691,-3.48,-313,1015,4.334 M,1392/12/2 ...

Ways to transfer information among Angular's services and components?

Exploring the Real-Time Binding of Data Between Services and Components. Consider the scenario where isAuthenticated is a public variable within an Authentication service affecting a component's view. How can one subscribe to the changes in the isAut ...

Encountering an unexpected token ';' in a random generator while attempting to utilize an if-else statement for determining DOM manipulation

After dabbling in programming on and off for a few years, I've finally decided to dive deep with some simple personal projects. One of the tasks I'm working on is creating a randomizer for a pen and paper RPG, where it samples from an array at ra ...

UI-Router: What is the best way to access a page within my project without adding it as a State?

Currently in the process of learning Angular and UI-Router. Initially, I followed the advice of many and chose to utilize UI-Router. In my original setup, the login page was included in all States. However, I decided it would be best to keep it as a separ ...

Does creating a form render the "action" attribute insignificant in an AJAX environment?

When submitting forms exclusively through AJAX, is there any advantage to setting the action attribute at all? I have yet to come across any AJAX-form guides suggesting that it can be left out, but I fail to see the purpose of including it, so I wanted t ...

"Error encountered in @mui/x-data-grid's ValueGetter function due to undefined parameters being passed

I'm currently using @mui/x-data-grid version 7.3.0 and I've encountered a problem with the valueGetter function in my columns definition. The params object that should be received by the valueGetter function is showing up as undefined. Below is ...

Attempting to rearrange the table data by selecting the column header

In an attempt to create a table that can be sorted by clicking on the column headers, I have written code using Javascript, HTML, and PHP. Below is the code snippet: <?php $rows=array(); $query = "SELECT CONCAT(usrFirstname,'',usrSurname) As ...

MongoDB function failing to properly return an array

I am currently exploring an efficient method to determine if each string within an array exists on MongoDB. The specific field to be queried is the 'name' field. However, I am encountering an issue when using the function below as it returns und ...

execute the command only if all ava tests succeed

I'm working on creating an npm script that will execute Ava, and if it is successful, will then run another deploy command. Is there a way to obtain the result of an Ava test in JavaScript, or to save it to a file or pass it to a subsequent command? ...

What method can be used to verify if Handlebar.js is integrated into the application?

I am struggling to verify the presence of Handlebar JS on the application's HTML page. No matter what I do, it keeps throwing an error saying "Uncaught Reference Error - Handlebars is not defined". Can anyone provide guidance on how to fulfill this ta ...

Unable to pass the jQuery value - troubleshooting tips for Laravel

JavaScript Issue return response()->json([ 'category' => $category, 'editRoute' => $artistCategoriesEditRoute ]); AJAX Response category Object { id: 1, title: "tt", parent_id: 0, … } id ...

Exploring the synergies of Next.js and Node.js thread pooling

In my current project, I am utilizing nextJS with NodeJS and looking to implement child processes or workers. The code provided by NextJS itself is functioning perfectly. The relevant code snippets: NextJS with NodeJS Another resource I referred to: Nex ...

Why does it seem like only one div is being added?

I am facing an issue with dynamically appending multiple div elements. Despite my efforts, only one div element is showing up on the browser when I try to test the code. I have searched for similar problems but could not find any solutions. Any assistanc ...

Is your Ajax jQuery live search not functioning properly with JSON data?

My programming code is not functioning properly. Here is the file I am working on. When it does work, it does not display the list and gives an error in the Json file. I am unsure of the reason behind this issue. You will be able to view the error in the C ...

Encountering an Enumeration Exception when trying to delete an element from a collection list using a foreach loop

I encountered an issue when attempting to remove an element from a list collection using foreach. I have searched online but have not found a clear explanation for the problem. If anyone has knowledge about this, please share the information. ...

Elegant Bootstrap 4 Carousel featuring a glimpse of the upcoming slide alongside the primary carousel item

I am in search of a straightforward Bootstrap 4 carousel that showcases a glimpse of the next slide on the right. Despite exploring similar questions, I have not found a suitable solution. The links to those questions are: 1)Bootstrap carousel reveal part ...

A step-by-step guide on implementing img source binding in Vue.js

<template> <div class="text-center"> <h1 class="display-4 my-5"><mark>GIGS</mark></h1> <b-container fluid="lg"> <b-row class="mx-auto"> <b-col lg="4" class=" ...