Используйте пакет 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'); но они также не работают.

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

Я явно что-то не так делаю. Я видел исходный код пакета 360 -act-pannellum , но мне нужен доступ ко всему 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"
    });
  }