Using Photo Sphere Viewer with React

Question

I have followed the guide but I am still a novice on this. I have created a basic react.js application and installed uevent, three, and photo-sphere-viewer as the guide requests. Then I used the code from Tiberiu Maxim to show the 360 panoramic view.

I get this error.

TypeError: photo_sphere_viewer__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function
(anonymous function)
src/App.js:9
   6 | const { src } = props;
   7 | 
   8 | useEffect(() => {
>  9 |   const shperePlayerInstance = PhotoSphereViewer({
     | ^  10 |     container: sphereElementRef.current,
  11 |     panorama:
  12 |       "https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg",

To recreate it run this

npx create-react-app my-app
cd my-app
npm install three
npm install uevent
npm install photo-sphere-viewer

And then overwrite the app.js to

import React, { useEffect } from "react";
import PhotoSphereViewer from "photo-sphere-viewer";

export default function App(props) {
  const sphereElementRef = React.createRef();
  const { src } = props;

  useEffect(() => {
    const shperePlayerInstance = PhotoSphereViewer({
      container: sphereElementRef.current,
      panorama:
        "https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg",
    });
    // unmount component instructions
    return () => {
      shperePlayerInstance.destroy();
    };
  }, [src]); // will only be called when the src prop gets updated

  return <div ref={sphereElementRef} />;
}

Answer 1

Answer Should have used PhotoSphereViewer.viewer and added new in front of it

import React, { useEffect } from "react";
import { Viewer } from "photo-sphere-viewer";

export default () => {
  const sphereElementRef = React.createRef();

  useEffect(() => {
    const shperePlayerInstance = new Viewer({
      container: sphereElementRef.current,
      panorama:
        "https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg",
    });

    // unmount component instructions
    return () => {
      shperePlayerInstance.destroy();
    };
  }, []); // will only be called when the src prop gets updated

  return <div ref={sphereElementRef} />;
};