[Bug]: Unable to run it in NextJs 14 + Typescript

[pacoorozco]

What happened?

I'm trying to make it run using NextJs 14 + Typescript but none of the documented ways works.

What should have happened?

Following the NextJs documentation in the README should be enough to make it work

Code

No response

Sandbox Link

No response

Library Version

latest

What operating system are you using?

Ubuntu

What browser are you using?

Chrome

Logs

 ⨯ ./src/components/MdxComponents/PanoramaViewer/PanoramaViewer.tsx:6:4
Module not found: Can't resolve 'react-photo-sphere-viewer'
  4 | const ReactPhotoSphereViewer = dynamic(
  5 |   () =>
> 6 |     import('react-photo-sphere-viewer').then(
    |    ^
  7 |       (mod) => mod.ReactPhotoSphereViewer,
  8 |     ),
  9 |   {

https://nextjs.org/docs/messages/module-not-found

Interest to fix the bug

• [ ] I would like to fix this bug!

[igorroc]

I'm also trying to use this lib in NextJs v14 (TS), and managed to work using the following code:

"use client"

import React from "react"
import { ReactPhotoSphereViewer, MarkersPlugin } from "react-photo-sphere-viewer"
import Img from "@/../public/panorama/test.jpg"

export default function Sphere() {
    const plugins = [
        [
            MarkersPlugin,
            {
                markers: [
                    {
                        id: "image",
                        position: { yaw: "0.33deg", pitch: "0.1deg" },
                        image: "panorama/pin-blue.png",
                        anchor: "bottom center",
                        size: { width: 32, height: 32 },
                        tooltip: "Teste",
                    },
                ],
            },
        ],
    ]

    return (
        <div>
            <ReactPhotoSphereViewer
                src={Img.src}
                height={"100vh"}
                width={"100%"}
                plugins={plugins}
            ></ReactPhotoSphereViewer>
        </div>
    )
}

I'm getting a syntax/type error when using the plugins prop, but the marker shows correctly

Type '(typeof MarkersPlugin | { markers: { id: string; position: { yaw: string; pitch: string; }; image: string; anchor: string; size: { width: number; height: number; }; tooltip: string; }[]; })[][]' is not assignable to type '(PluginConstructor | [PluginConstructor, any])[]'.

[Elius94]

https://github.com/Elius94/react-photo-sphere-viewer/releases/tag/v5.0.0-psv5.7.1

now you have to use plugins in a different way!

[!IMPORTANT] Since v5.0.0-psv5.7.1, to use <ReactPhotoSphereViewer /> you have to manually install the JS library @photo-sphere-viewer/core. This is a breaking change. The library is not included in the package anymore. You can install it using the command npm install @photo-sphere-viewer/core or yarn add @photo-sphere-viewer/core. I decided to remove the library from the package to reduce the size of the package and to avoid the need to update the package every time the original library is updated. In particular, from now on, to use a plugin or an adapter, you need to import it directly from the package. For example, to use the MarkersPlugin you need to import it from the package import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin'.

[mkubdev]

Hi @pacoorozco, the issue with Next.js usage is now fixed, I recommend checking out the updated examples in the documentation, specifically tailored for both page and app routers.

[pacoorozco]

Thanks a lot folks!