Используйте пакет NPM в React Component

Question

Я пытаюсь использовать пакет Pannellum NPM в своем компоненте React.

API Pannellum можно использовать так:

pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "https://pannellum.org/images/alma.jpg"
});

Я думал, что следующий код:

import React, { Component } from 'react';
import './App.css';
import pannellum from 'pannellum';

class App extends Component {

  componentDidMount() {
    pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": "https://pannellum.org/images/alma.jpg"
    });
  }

  render() {
    return (
      <div id="panorama"></div>
    );    
  }
}

export default App;

должно сработать. Однако это не так. я получил TypeError: __WEBPACK_IMPORTED_MODULE_2_pannellum___default.a.viewer is not a function,

Пробовал также разные операторы импорта: import { pannellum } from 'pannellum';, const pannellum = require('pannellum'); но они тоже не работают.

Что интересно, API-интерфейс Pannellum для javascript связан, и как только я закомментирую componentDidMount() и попробуйте использовать API через консоль Chrome Dev Tools после загрузки страницы, она работает. Однако стили CSS не применяются.

Я явно что-то не так делаю. Я видел исходный код пакета 360-реагировать-паннелл, но мне нужен доступ ко всему API, а не только к визуализации, чтобы он не соответствовал моим потребностям.

Спасибо за помощь.

Answer 1

Глядя на исходный код pannellum, он не экспортирует ни один модуль, а помещает все в объект окна.

Попробуйте импортировать код и использовать его прямо из окна.

import React, { Component } from 'react';
import './App.css';
import 'pannellum';


class App extends Component {

  componentDidMount() {
    window.pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": "https://pannellum.org/images/alma.jpg"
    });
  }

  render() {
    return (
      <div id="panorama"></div>
    );    
  }
}

export default App;

Answer 2

Пытаться

componentDidMount() {
    window.pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": "https://pannellum.org/images/alma.jpg"
    });
  }