Use NPM package in React Component

Question

I try to use Pannellum NPM package in my React component.

Pannellum's API can be used like this:

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

I thought the following code:

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;

would work. However it does not. I get TypeError: __WEBPACK_IMPORTED_MODULE_2_pannellum___default.a.viewer is not a function.

Tried also a different import statements: import { pannellum } from 'pannellum';, const pannellum = require('pannellum'); but these also don't work.

What's interesting, Pannellum's API javascript code is bundled and once I comment out componentDidMount() and try to use the API via Chrome Dev Tools console once the page is loaded, it works. However there are no CSS styles applied.

I clearly do something wrong. I have seen 360-react-pannellum package source code but I need access to the whole API, not just rendering so it does not suit my needs.

Thank you for your help.

score 5 · Accepted Answer · answered May 02 '18 at 13:13

5

Looking at the source code of pannellum, it does not export any module but puts everything on the window object.

Try importing the code and using it directly from the window.

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;

answered May 02 '18 at 13:13

Alex Driaguine

490
5
8

Thank you for the answer. It does work indeed, however there are no CSS styles. – Dandry May 02 '18 at 13:21
1

I think the same goes for the stylesheet, you have to import it into your component (given that you have a loader for that or use create-react-app). Try `import 'panellum.css` – Alex Driaguine May 02 '18 at 13:23
Well, the thing is there is no `pannellum.css`. I was hoping simply importing `pannellum` would also include the css. But it seems that instaling this package is pointless, I would be better off importing both Pannellum's `.js` and `.css` locally or simply using CDN. – Dandry May 02 '18 at 13:49

score 1 · Answer 2 · answered May 02 '18 at 13:09

1

Try

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

answered May 02 '18 at 13:09

Sander Ruul

51
3

Use NPM package in React Component

2 Answers2