3

I'm trying to use a JQuery Plugin (SignalR) inside my React application.

What I did is :

  1. Install jquery via npm ;
  2. Install the signalr client via npm ;
  3. Add entries in webpack.config to specify jQuery and SignalR paths ;
  4. Use import $ from 'jquery' and import 'msSignalrClient' in the React component I want to.

But that doesn't seem to work as I get this error : jquery.signalR.min.js?dc9f:9Uncaught Error: jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file.

One workaround that works is to load in jQuery like this inside my index.html : <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>. Of course it's not optimal at all, and I'd like to import jQuery with the method I explained above. Any help appreciated !

Clafouti
  • 4,035
  • 5
  • 30
  • 38
  • I guess it does not matter how you include jquery. You just need to ensure that this condition https://github.com/SignalR/SignalR/blob/1fba14fa3437e24c204dfaf8a18db3fce8acad3c/src/Microsoft.AspNet.SignalR.Core/Scripts/hubs.js#L16-L18 is being satisfied because this is how the signalr client is using jquery. – Pawel Oct 18 '16 at 20:01
  • 1
    use [expose-loader](https://github.com/webpack/expose-loader) refer http://stackoverflow.com/a/29083197/525788 – RockResolve Dec 22 '16 at 00:05

2 Answers2

3

this should work:

npm install jquery signalr expose-loader --save

//inside vendor.ts
import 'expose-loader?jQuery!jquery';
import '../node_modules/signalr/jquery.signalR.js';
hannes neukermans
  • 12,017
  • 7
  • 37
  • 56
1

What I did in the end is this:

window.$ = window.jQuery = require("jquery");
Clafouti
  • 4,035
  • 5
  • 30
  • 38