"Encountering an issue with Power BI custom visuals - encountering '$ is not a function' error message while attempting

When developing custom Power Bi Visuals using Pbiviz, what could be the cause of the error $ is not a function?

This issue arises when attempting to specify jQuery plugins. It seems like there may be an incorrect order of libraries, although the output file appears to have the correct one.

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "sourceMap": true,
    "out": "./.tmp/build/visual.js"
  },
  "files": [
    ".api/v1.7.0/PowerBI-visuals.d.ts",
    "src/settings.ts",
    "src/visual.ts",
    "node_modules/@types/jquery/index.d.ts",
    "node_modules/@types/datatables.net/index.d.ts",
    "node_modules/@types/lodash/index.d.ts",
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts"
  ]
}

pbiviz.json:

"externalJS": [
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
    "node_modules/jquery/dist/jquery.js",
    "node_modules/datatables.net/js/jquery.dataTables.js",
    "node_modules/lodash/lodash.min.js"
  ],

package.json:

"dependencies": {
    "@types/datatables.net": "^1.10.1",
    "@types/jquery": "^2.0.48",
    "@types/lodash": "^4.14.50",
    "datatables.net": "^1.10.15",
    "jquery": "^2.1.0",
    "lodash": "^4.17.4",
    "powerbi-visuals-utils-dataviewutils": "1.2.0"
  },

Error Message:

Uncaught TypeError: $ is not a function
at <anonymous>:14820:21
at <anonymous>:10387:3
at Window.<anonymous> (<anonymous>:10390:1)
at <anonymous>:25969:20
at Object.r [as injectJsCode] (visualhostcore.min.js:2)
at i.loadWithoutResourcePackage (visualsandbox.min.js:1)
at i.executeMessage (visualsandbox.min.js:1)
at i.onMessageReceived (visualsandbox.min.js:1)
at visualsandbox.min.js:1
at e.invokeHandler (visualhostcore.min.js:2)
jquerytypescriptnpmdatatablespowerbi

Answer №1

The issue lies within the sandbox environment, where all custom visuals function as intended despite the fake window object.

To address this problem, consider the following approach:

First, create a JavaScript file with the code snippet below:

var jQuery = typeof jQuery !== 'undefined'
    ? jQuery
    : window['$'];

Next, include this newly created file in the externalJS section of your pbiviz.json file. It's important to place this row after "node_modules/jquery/dist/jquery.js" and before "node_modules/datatables.net/js/jquery.dataTables.js" (in other words, after jQuery but before any jQuery plugins).

For reference, see an example implementation at: https://github.com/Microsoft/powerbi-visuals-heatmap/blob/master/pbiviz.json#L24

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

What is the process for incorporating personalized variables into the Material Ui Theme?

In the process of developing a react app with TypeScript and Material UI, I encountered an issue while attempting to define custom types for my themes. The error message I received is as follows: TS2322: Type '{ mode: "dark"; background: { default: s ...

reactjstypescriptmaterial-ui

The autocomplete feature in Jquery tagsinput is malfunctioning within a Bootstrap modal

Currently, I am working on implementing an autocomplete tag search within a bootstrap modal. The jquery library that I am using for this purpose can be found at this link. While the autocomplete search feature functions properly when the input textbox i ...

jquerybootstrap-4bootstrap-tags-input

Issue with node-gyp not utilizing the private registry configured in npm

The server running this application is located behind a corporate firewall and only has access to a specific private registry. This registry also serves as a proxy to the public npm registry for packages that are not available locally. While NPM functions ...

node.jsnpmconfigurationnode-gyp

What is the process for integrating custom commands in Cypress?

I have successfully implemented custom commands in Cypress and I am using Visual Studio Code as my editor. To enable IntelliSense to recognize these custom commands, I referred to this link. In order to achieve this, I created a cypress/index.d.ts file: ...

javascripttypescriptvisual-studio-codecypress

Switching the class again does not result in an icon change

When a button is clicked, a class of "fa-minus" is added to a newly appearing div. If the fa-minus class is then clicked, the text decoration changes to a "line-through". Additionally, I want the fa-minus icon to change to fa-plus (which will undo the line ...

jquery

Displaying the ngFor data in the HTML section

Struggling with passing an array from poll-vote.component.ts to poll-vote.component.html. The data involves radio buttons and I'm using ngFor loop with index, but it's not working as expected: Here is my poll-vote.component.ts code: import { Com ...

angulartypescript

Troubleshooting a problem with the Ajax load function

I recently created a website with Joomla 3. There is a "contact" link located at the bottom right corner that triggers a contact form to load via ajax, utilizing the jquery load function. The problem Upon inspecting the console, I discovered this error: ...

jqueryhtmlajaxjoomla

What steps do I need to take to design an overlay navigation menu?

I have been inspired by the design on and would like to create something similar. I believe that I will need to use jQuery for this project, but so far I haven't come across a suitable plugin that can achieve the same functionality. Edit: My apolog ...

jquery

Ensuring Bootstrap v4 Does Not Collapse When Double-Clicked

Issue: An issue arises when utilizing a checkbox to trigger the collapse of an element. It becomes susceptible to breaking if the checkbox is double-clicked before the transition of the collapse element completes. Possible Fix: In order to avoid this pro ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

What was the reason for the delay in updating the local state within the ToggleButtonsGroup MUI component caused by the onChange handler?

I've encountered an issue with the ToggleButtonGroup component from the material-ui library, specifically in the onChange handler. I started with a more complex code and simplified it step by step to arrive at this code snippet. However, I'm puzz ...

reactjstypescriptmaterial-uionchangereact-functional-component

The input texts are intertwined with one another through an autocomplete function

My latest project involves two input fields, one for ID and the other for Name. When I enter an ID in the first input field and then move to the second (either by pressing tab or clicking), the second input field automatically populates with the correspond ...

javascriptjqueryhtmlinputautocomplete

I searched through the interface folder in the component.ts file but couldn't locate my typescript property

My coding dilemma goes something like this:- Within the interface folder, I have created a book.ts file with properties. However, my book.component.ts is not recognizing the book.ts property. It seems to work fine when I import the interface (book.ts) dir ...

angulartypescriptangular-materialangular11

NPM Audit Fix is recommending a package downgrade

We were alerted by an NPM Audit warning regarding jsonwebtoken <= 8.5.1. The recommendation was to upgrade mssql to version 7.2.0. Instead of following the suggestion, we uninstalled mssql using npm remove mssql and then re-installed it to get the lates ...

node.jsnpm

What is causing my AJAX script to refresh the page repeatedly?

I am currently testing the functionality of submitting a form using ajax. The script I have in place is designed to echo some plain text in processform.php. However, when I click on the submit button, no alert is displayed and the page is reloaded instead. ...

jqueryhtmlajax

Is it possible to have setTimeOut() executed after the page has been redirected?

Why is it not possible to duplicate: The question was not addressed in the previous post. I have a link for deletion, which, when clicked, triggers a popup with a button. Upon clicking that button, the page inside the popup redirects to a new internal pag ...

javascriptjqueryhttp-redirectsettimeout

Error: Unable to access $rootScope in the http interceptor response function

I have set up an interceptor to display an ajax spinner while loading. interface IInterceptorScope extends angular.IRootScopeService { loading: number; } export class Interceptor { public static Factory($q: angular.IQService, $ro ...

angularjstypescript

Tips on updating a class name with jquery

I'm attempting to change the classname of an ASPxClientLabel using javascript. Is there a way to accomplish this? Here's what I have tried: The label is embedded within a repeater control: <dx:ASPxLabel ID="labelShortName" runat="server" Cs ...

jqueryasp.netdevexpress

Issue with JQuery Mobile: Inconsistent page navigation functionality

I am currently utilizing JQuery Mobile along with MVC4. MARKUP: <div data-role="page" data-theme="d" id="main"> <div data-role="header"> <h1>Test Page</h1> </div> <div data-role="content"> & ...

jqueryasp.net-mvcjquery-mobile

Retrieve the user-inputted data from an Electron BrowserView's input field

Consider this scenario where a BrowserWindow is set up with specific security settings, including enabling the webviewTag: true for project requirements. let webPrefs = { plugins: false, nodeIntegration: false, nodeIntegrationInWorker: false, ...

javascriptnpmelectronchromium

Tips for inserting a doctype in an HTML page through JavaScript or jQuery

How can I use JavaScript or jQuery to add a doctype specifically for my webpage? I am looking to incorporate the following code using JavaScript: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dt ...

javascriptjquerydoctype