title: Using Photo Sphere Viewer with React
body: <p>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 <a href="https://photo-sphere-viewer.js.org/guide/#your-first-viewer" rel="nofollow noreferrer">guide requests</a>. Then I used the code from  <a href="https://stackoverflow.com/questions/56298812/photo-sphere-viewer-on-react-pure-javascript/62085522#62085522">Tiberiu Maxim</a> to show the 360 panoramic view.</p>
  
  <p>I get this error.</p>
  
  <pre><code>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(() =&gt; {
  &gt;  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",
  </code></pre>
  
  <p>To recreate it run this</p>
  
  <pre><code>npx create-react-app my-app
  cd my-app
  npm install three
  npm install uevent
  npm install photo-sphere-viewer
  </code></pre>
  
  <p>And then overwrite the app.js to </p>
  
  <pre><code>import React, { useEffect } from "react";
  import PhotoSphereViewer from "photo-sphere-viewer";
  
  export default function App(props) {
    const sphereElementRef = React.createRef();
    const { src } = props;
  
    useEffect(() =&gt; {
      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 () =&gt; {
        shperePlayerInstance.destroy();
      };
    }, [src]); // will only be called when the src prop gets updated
  
    return &lt;div ref={sphereElementRef} /&gt;;
  }
  
  </code></pre>