Как в react подключить библиотеку?

Question

[Aleksey100]

Приветствую всех.

Делаю проект на react.js и в index.html подключаю скрипт

<script src="signalr-client-1.0.0-alpha2-final.min.js"></script>

И когда здесь же в index.html его использую, то все нормально

var httpConnection = new signalR.HttpConnection(hubUrl);
var hubConnection = new signalR.HubConnection(httpConnection);

Но если пытаюсь так же его использовать внутри компонента, то получаю ошибку

./src/pages/PageDialogs.js
  Line 40:  'signalR' is not defined  no-undef
  Line 41:  'signalR' is not defined  no-undef

Подскажите пожалуйста как правильно подключить библиотеку что бы можно было использовать ее внутри компонента?

Answer 1

[Антон Спирин]

Выполните в директории проекта в терминале:
npm install signalr-client -S

В исходном коде импортируете и используете:

import signalR from 'signalr-client';

const client  = new signalR.client( ... );

Comments

[Aleksey100]

Спасибо за ответ.
Получаю ошибку TypeError: WebSocketClient is not a constructor

А есть способ просто подключить именно ту библиотеку которая в вопросе?

Вот она если что https://www.npmjs.com/package/@aspnet/signalr-client

[Антон Спирин]

Aleksey100, ясно. Две одноименные библиотеки. Точно не увидел, что первая для node.js

Но это дела не меняет. Все точно так же:
npm install @aspnet/signalr-client -S

import signalR from '@aspnet/signalr-client';

let connection = new signalR.HubConnection('/chat');

Только сначала старую снесите.

[Aleksey100]

Антон Спирин,

import signalR from '@aspnet/signalr-client';

let connection = new signalR.HubConnection('/chat');

Так не получается, возможно в этой библиотеке нет export или еще почему то, но когда пытаюсь выполнить console.log(signalR );

Получаю undefined

[Антон Спирин]

Aleksey100, что-то разработчики все запутали, пакет назвали '@aspnet/signalr-client', а подключается по-другому причем примеров нет.
Вот нашел в обсуждениях:

import { HubConnection } from 'signalr-client/dist/browser/signalr-client.js';

есть еще такой вариант:
import { HubConnection } from 'signalr-client';

Может можно и так:
import signalR from 'signalr-client';

[Aleksey100]

Антон Спирин, не работает.

В папке signalr-client/dist/browser нет файла signalr-client.js.
В папке @aspnet/signalr-client/dist/browser тоже.

Возможно вона вообще не подразумевает импорт в компоненте )

Может все таки есть способ подключить ее без импорта, как просто скрипт?

[Антон Спирин]

Aleksey100, другие разработчики подключают. Я же советовал вам первую версию которую подключали снести. Возможно из-за этого ничего и не работает.
Ну попробуйте через webpack:

var webpack = require("webpack");

    ...

    plugins: [
        new webpack.ProvidePlugin({
            signalR: "signalr-client"
        })
    ]

Но сначала обязательно снесите node_modules, удалите старую версию из package.json и выполните npm install

[Aleksey100]

Антон Спирин, Разобрался, спасибо )