search

Elius94 / react-photo-sphere-viewer

Photosphere Viewer for React.JS
MIT License
69 stars 21 forks source link

[Bug]: Named export 'AutorotatePlugin' not found. #30

Closed martenjurgens closed 1 year ago

martenjurgens commented 1 year ago

What happened?

Hello, thanks for the project.

Trying to use any of the plugins with Nextjs 13 gives this Syntaxerror.

image

What should have happened?

Should be able to use plugins without getting the error.

Code

import dynamic from "next/dynamic";
import Head from "next/head";
import { createRef } from "react";
import { MarkersPlugin } from "react-photo-sphere-viewer";

const ReactPhotoSphereViewer = dynamic(
  () => import("react-photo-sphere-viewer").then((mod) => mod.ReactPhotoSphereViewer),
  {
    ssr: false,
  }
);

const handleClick = (data: any & { type: "click" }) => {
  console.log(data);
};

export default function Home() {
  const pSRef = createRef();

  const handleReady = (instance: any) => {
    const markersPlugs = instance.getPlugin(MarkersPlugin);
    if (!markersPlugs) return;
    console.log(markersPlugs);
    markersPlugs.addMarker({
      id: "imageLayer2",
      imageLayer: "test.png",
      size: { width: 220, height: 220 },
      position: { yaw: "130.5deg", pitch: "-0.1deg" },
      tooltip: "Image embedded in the scene",
    });
    markersPlugs.addEventListener("select-marker", () => {
      console.log("asd");
    });
  };

  const plugins = [
    [
      MarkersPlugin,
      {
        // list of markers
        markers: [
          {
            // image marker that opens the panel when clicked
            id: "image",
            position: { yaw: "0.33deg", pitch: "0.1deg" },
            image: "pin-blue.png",
            anchor: "bottom center",
            size: { width: 32, height: 32 },
            tooltip: "Mountain peak. <b>Click me!</b>",
          },
          {
            // image marker rendered in the 3D scene
            id: "imageLayer",
            imageLayer: "drone.png",
            size: { width: 220, height: 220 },
            position: { yaw: "13.5deg", pitch: "-0.1deg" },
            tooltip: "Image embedded in the scene",
          },
        ],
      },
    ],
  ];

  return (
    <>
      <Head>
        <title>Virtual tour</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <ReactPhotoSphereViewer
        ref={pSRef}
        src="test.jpg"
        height={"100vh"}
        width={"100%"}
        littlePlanet={false}
        onReady={handleReady}
        onClick={handleClick}
        plugins={plugins as any}
        container="main"
      ></ReactPhotoSphereViewer>
    </>
  );
}

Sandbox Link

https://codesandbox.io/p/sandbox/autumn-forest-0ugkzs?file=%2Fnext.config.js&selection=%5B%7B%22endColumn%22%3A2%2C%22endLineNumber%22%3A4%2C%22startColumn%22%3A2%2C%22startLineNumber%22%3A4%7D%5D

Library Version

latest

What operating system are you using?

Windows

What browser are you using?

Chrome

Logs

import { AutorotatePlugin } from './node_modules/@photo-sphere-viewer/autorotate-plugin/index.module.js';
         ^^^^^^^^^^^^^^^^
SyntaxError: Named export 'AutorotatePlugin' not found. The requested module './node_modules/@photo-sphere-viewer/autorotate-plugin/index.module.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from './node_modules/@photo-sphere-viewer/autorotate-plugin/index.module.js';
const { AutorotatePlugin } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
  page: '/'
}

Interest to fix the bug

Elius94 commented 1 year ago

Hi, thank you for the issue, and also for making a Sandbox. Unfortunatelly, I don't really know Next.JS as well. I now that sometimes some issues related to that happens. Can you try to contribute to this bug fixing and help me? It will be a really kind help. Thanks

martenjurgens commented 1 year ago

Maybe @mkubdev could be of help? I believe I don't have the necessary skills to fix it.

martenjurgens commented 1 year ago

Importing like import { MarkersPlugin } from "react-photo-sphere-viewer/dist/index"; instead of import { MarkersPlugin } from "react-photo-sphere-viewer fixes the issue.

Elius94 commented 1 year ago

Ok, thanks a lot! I'll integrate the docs

Il sab 22 apr 2023, 13:30 Marten Jyrgens @.***> ha scritto:

Importing like import { MarkersPlugin } from "react-photo-sphere-viewer/dist/index"; instead of import { MarkersPlugin } from "react-photo-sphere-viewer fixes the issue.

— Reply to this email directly, view it on GitHub https://github.com/Elius94/react-photo-sphere-viewer/issues/30#issuecomment-1518614332, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADRXUU7KBYRL2FMLQZJNNHLXCO6M7ANCNFSM6AAAAAAXHA5MHQ . You are receiving this because you were assigned.Message ID: @.***>

mkubdev commented 1 year ago

Maybe @mkubdev could be of help? I believe I don't have the necessary skills to fix it.

Hi @martenjurgens and @Elius94, sry I was not available when you tagged me.. Awesome for the fix!

Elius94 commented 1 year ago

Importing like import { MarkersPlugin } from "react-photo-sphere-viewer/dist/index"; instead of import { MarkersPlugin } from "react-photo-sphere-viewer fixes the issue.

This solves the issue!