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

Question

Aleksey100 @Aleksey100

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

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

Делаю проект на 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

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

Вопрос задан более трёх лет назад
1378 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 1

7 комментариев

Aleksey100 @Aleksey100 Автор вопроса

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

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

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

Написано более трёх лет назад
Антон Спирин @rockon404 Куратор тега React
Aleksey100, ясно. Две одноименные библиотеки. Точно не увидел, что первая для node.js

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

import signalR from '@aspnet/signalr-client'; let connection = new signalR.HubConnection('/chat');

Только сначала старую снесите.
Написано более трёх лет назад
Aleksey100 @Aleksey100 Автор вопроса
Антон Спирин,
import signalR from '@aspnet/signalr-client'; let connection = new signalR.HubConnection('/chat');

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

Получаю undefined
Написано более трёх лет назад
Антон Спирин @rockon404 Куратор тега React
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 @Aleksey100 Автор вопроса

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

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

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

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

Написано более трёх лет назад
Антон Спирин @rockon404 Куратор тега React
Aleksey100, другие разработчики подключают. Я же советовал вам первую версию которую подключали снести. Возможно из-за этого ничего и не работает.
Ну попробуйте через webpack:
var webpack = require("webpack"); ... plugins: [ new webpack.ProvidePlugin({ signalR: "signalr-client" }) ]

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

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

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

Простой
По какой логике bind принимает только первый контекст?
- 1 подписчик
- 4 часа назад
- 73 просмотра
2

ответа
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- 5 часов назад
- 22 просмотра
1

ответ
JavaScript

+3 ещё

Средний
Как сделать выборку mongo?
- 1 подписчик
- 6 часов назад
- 23 просмотра
0

ответов
React

Простой
Почему не обновляется значение в useState?
- 1 подписчик
- 6 часов назад
- 48 просмотров
1

ответ
React

Средний
Выделение ядра у фронта на реакте, какие есть варианты реализации?
- 1 подписчик
- 7 часов назад
- 37 просмотров
0

ответов
JavaScript

Средний
Запись в cookie или localStorage только при открытии страницы?
- 1 подписчик
- 7 часов назад
- 35 просмотров
3

ответа
JavaScript

+2 ещё

Средний
Правильно ли настроен webpack.config для PWA приложения?
- 1 подписчик
- 8 часов назад
- 24 просмотра
0

ответов
JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- 12 часов назад
- 55 просмотров
1

ответ
React

+2 ещё

Средний
Как загружать данные перед серверным рендерингом в React?
- 2 подписчика
- 21 час назад
- 143 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как при помощи js создать поле дополнительных ингридиентов?
- 1 подписчик
- 22 часа назад
- 77 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Необходимо сверстать приложение согласно макету Figma используя React

26 апр. 2024, в 22:22

1500 руб./за проект

Написать модуль подключения матрицы Sony к ПЛИС (Verilog)

26 апр. 2024, в 21:30

15000 руб./за проект

8266 f12 требуется сделать ревью и оптимизировать работу

26 апр. 2024, в 20:42

2000 руб./за проект

Answer 1 · 2018-01-17 11:01:41

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

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

import signalR from 'signalr-client';

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

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт