Cannot use pannellum in react site, getting "viewer is not a function" error

[spimou]

I want to use pannellum 2.5.6 inside react 18.2.0. Here is my code so far

import React, { useRef, useEffect } from 'react'; 
import * as pannellum from 'pannellum'
const pano = '../assets/pano.jpg';

function ViewPane() {
  const pannellumContainer = useRef(null);

  useEffect(() => {
    const viewer = pannellum.viewer(pannellumContainer.current, {
      type: 'equirectangular',
      panorama: pano
    });
    return () => {
      viewer.destroy();
    };
  }, []);

  return (
    <div
      ref={pannellumContainer}
      style={{ width: '100%', height: '500px' }}
    ></div>
  );
}

export default ViewPane;

I get caught TypeError: pannellum__WEBPACK_IMPORTED_MODULE_1__.viewer is not a function error

I have tried several alternatives, like const viewer = new pannellum.viewer(pannellumContainer.current, { and I getcaught TypeError: pannellum__WEBPACK_IMPORTED_MODULE_1__.viewer is not a constructor error

I tried replacing viewer with Viewer, same errors reffering to Viewer

I tried importing like so import { Viewer } from 'pannellum' and then using it like so const viewer = Viewer(pannellumContainer.current, { I get the same caught TypeError: (0 , pannellum__WEBPACK_IMPORTED_MODULE_1__.Viewer) is not a function error

I also tried using useRef to set Viewer like so : import it import { Viewer } from 'pannellum', set useRef const v = useRef(null); and in the useEffect v.current = new Viewer(pannellumContainer.current, { and I get the caught TypeError: pannellum__WEBPACK_IMPORTED_MODULE_1__.Viewer is not a constructor error

How can I fix this?

[mpetroff]

Pannellum isn't an ES6 module, so you can't import it like one. You can either use a <script> tag, as is used in all of the examples, or use import 'pannellum'; (or you might need import 'pannellum.js'; or import 'path/to/pannellum.js';, depending on how you have things set up).

[floatline]

This worked for me

useLayoutEffect(() => {
        pannellumContainer.current = window.pannellum.viewer(pannellumContainer.current, {
        type: 'equirectangular',
        panorama: pano

        });
        return () => {
            pannellumContainer.current.destroy()
        }
    }, []);

[floatline]

Also, as @mpetroff mentioned, pannellum should be imported as import 'pannellum';

[alanbaltabai]

@floatline thanks, it worked for me as well 🥳