NextJS: Как импортировать JS-библиотеки?

Question

[J. Snow]

Пишу проект на TypeScript с использованием NextJs (под капотом у него WebPack).
Нужно импортировать библиотечку, не оформленную в виде js-модуля.
Эта библиотечка тупо создаёт переменные и функции в своей области видимости и всё:

// my-library.js
var var1 = ...
function fn1() { ... }

Задача:
Нужно импортировать эту библиотечку так, чтобы можно было использовать var1 и fn1.

Comments

[Даша Циклаури]

а как эта библиотека будет на сервере работать?

[J. Snow]

Даша Циклаури, никак. Отключу SSR для этого компонента с помощью 'next/dynamic'.

[Даша Циклаури]

J. Snow, подключи с помощью script из этого компонента,
только скорее всего это либа создаёт не в своей области видимости, а в глобальной

[WbICHA]

J. Snow, а в чём проблема сделать из библы модуль и использовать его как белый человек?
Тем более, что иначе тайпскрипт всё равно ругаться будет на необъявленные переменные и функции.

[J. Snow]

WbICHA, как именно? Просто вручную прописать экспорт?

[WbICHA]

J. Snow, ну да.

Answer 1

[Aetae]

import './my-library.js'; // без from

Если без allowJs, то ещё докинуть файлик my-library.d.ts с деклакрициями:

declare let var1: number;
declare function fn1(): void;
// ...

Comments

[J. Snow]

Этот вариант не сработает, т.к.
1) my-library.js явно ничего не экспортирует
2) при импорте её код выполняется в изолированной области видимости

[Aetae]

J. Snow, ну тогда как советовали - подключай как script, тогда весь этот мусор вывалится глобально.

Есть варианты заинлайтить её в нужном месте или пересобрать на лету в модуль специальным лоадером, но это хитрая алхимия webpack'a и стоит этим заниматься только тем кто собственно это умеет.)