global jquery object

[gilesbradshaw]

when I do

import $ from 'jquery';
import 'ms-signalr-client';

I get

Uncaught Error: jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file.

So I am trying..

import $ from 'jquery';
window.jQuery = $;
require('ms-signalr-client');

which seems to work!

[dfrencham]

hi mate. What is the context? are you using Babel, or TS or something else?

Give this syntax a try:

import * as $ from 'jquery';
import 'ms-signalr-client';

[Laoujin]

Using babel here.

Only the following worked for me:

import $ from 'jquery';
window.jQuery = $;
require('ms-signalr-client');

[everystone]

@gilesbradshaw

import $ from 'jquery'; window.jQuery = $; require('ms-signalr-client');

Thank you so much! Ive been struggling for days, trying every combination, This is the only thing that works. Im using Jest.

[DanielJomphe]

The answer above gave me hints required. I need the window.jQuery = $; line to come from a loader, so I added this loader to expose jquery to the window object:

            {
                test: require.resolve("jquery"),
                loader: "expose?jQuery!expose?$"
            },

As per this SO question.

[patrickmichalina]

This does not work using JSPM:

import $ from 'jquery';
window.jQuery = $;
require('ms-signalr-client');

require is not defined (obviously using system module system).

[ivanov84]

I use TypeScript 2.0 and this worked for me: import 'expose-loader?jQuery!jquery'; import 'expose-loader?$!jquery'; import 'ms-signalr-client';

with installed "expose-loader" npm before

[esmoore68]

I have been banging my head with this for hours. I have tried all of the relevant combinations above. I am using Aurelia, TypeScript and Webpack. The error I get on the first line where I attempt to access the hubConnection property of $:

var connection = $.hubConnection(signalrAddress);

ERROR [app-router] TypeError: WEBPACK_IMPORTED_MODULE_3_jquery.hubConnection is not a function.

I have debugged the line in ms-signal-r client to verify that the property is being set in that file, but as soon as that function closes, my watch on $.hubConnection goes to undefined. Any help is appreciated.

[dfrencham]

@esmoore68 would you happen to have some test code you can put up on github/dropbox or similar, so I can attempt to reproduce?

[esmoore68]

I get this running your sample package at: https://github.com/dfrencham/SignalR-Aurelia-Example

Looking at the issues list on that project, it looks like I’m not the only one.

[charandas]

For those interested in getting this working with jspm: I am on 0.17.0-beta.40.

I worked with github:SignalR/bower-signalr@2.2.1 package and similar steps should work out for this repo.

My override looks like:

{
  "format": "global",
  "main": "./jquery.signalR.js",
  "meta": {
    "jquery.signalR.js": {
      "globals": {
        "jQuery": "jquery"
      },
      "deps": [
        "jquery"
      ]
    }
  }
}

And my jspm.config.js contains following path mapping also:

SystemJS.config({
  packages: {
    'github:SignalR/bower-signalr@2.2.1': {
      'map': {
        'jquery': 'npm:jquery@2.2.4'
      }
    }
}

This is all I needed to get it working. For me, it was working without the above fix in Chrome, but it required the above fix to work in Electron.

[esmoore68]

For what it's worth, I haven't gotten all the way to the bottom of this, but the culprit seems to be that something in the dependency chain is overwriting the $ variable with a different instance of jQuery, so that by the time my code gets to it, the instance that the signalr module hung its property off of is no longer assigned to the global $. The only way I knew to get around it was by modifying the signalR module code to store my own copy of $ in a global, and using that variable later. Not optimal, obviously.

[charandas]

@esmoore68 I am curious if you won't end up needing the hack after added the "exports": "jQuery" like so:

"github:SignalR/bower-signalr@2.2.1": {
        "format": "global",
        "meta": {
          "*": {
            "exports": "jQuery",
            "globals": {
              "jQuery": "jquery"
            },
            "deps": [
              "jquery"
            ]
          }
        },
        "main": "./jquery.signalR.js",
        "map": {}
      },

And whereever you wanted to use $.hubConnection, you in fact started with:

import $ from 'SignalR/bower-signalr';
// then use $.hubConnection

I was having a similar experience with npm:slick-carousel@1.6.0, but the exports approach nailed it for me.

[ivanov84]

I use ionic 3.1.0 I have work example! :) Sharing with you))))

Add in that file: node_modules\@ionic\app-scripts\config\webpack.config.js That: plugins: [ new webpack.ProvidePlugin({ "window.jQuery": "jquery" }), ionicWebpackFactory.getIonicEnvironmentPlugin() ],

In your TS file, just add "import 'ms-signalr-client';" That's all. You can use jquery and signalr by calling:

this.hubConnection = window["jQuery"].hubConnection();

[PpyMohan]

hi i am new to ionic can you provide sample code for Ionic signalR

[local-joke]

If you get the "window is not defined" error, then you should try this `import $ from 'jquery' const isClient = typeof window !== 'undefined'

if (isClient) { window.jQuery = $; require('ms-signalr-client') }`

[baoqger]

In Angular7 with Typescript, it can't work with error: Property 'jQuery' does not exist on type 'Window'.

[ivanov84]

@baoqger https://github.com/dfrencham/ms-signalr-client/issues/15#issuecomment-509604417

[dfrencham]

This package has been deprecated in favour of the officially supported Microsoft version: https://www.npmjs.com/package/signalr

Please switch to the official version.