Problem with initialization of MarkersPlugin or Import

[polkakropka]

instance.getPlugin('MarkersPlugin') return undefined.

`import { useRef } from 'react'; import dynamic from 'next/dynamic'; import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin'; import { Viewer } from '@photo-sphere-viewer/core'; const ReactPhotoSphereViewer = dynamic( () => import('react-photo-sphere-viewer').then( (mod) => mod.ReactPhotoSphereViewer ), { ssr: false, } ); const PanoramaModule = () => { const photoSphereRef = useRef(null); const handleReady = (instance: Viewer) => { const markersPlugs: MarkersPlugin = instance.getPlugin('MarkersPlugin'); console.log(markersPlugs); if (!markersPlugs) return; console.log(markersPlugs); // instance.getPlugin('MarkersPlugin') return undefined. markersPlugs.addMarker({ id: 'imageLayer2', imageLayer: 'https://photo-sphere-viewer-data.netlify.app/assets/pictos/target.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'); }); };

if (!MarkersPlugin) { return null; } console.log(MarkersPlugin);

photoSphereRef?.current?.animate({ latitude: 0, longitude: 0, zoom: 55, speed: '10rpm', });

return (

); };

export default PanoramaModule; `

PACKAGE JSON:

"dependencies": { "@googlemaps/js-api-loader": "~1.14.3", "@liebherr/patternlib": "~2.4.0", "@photo-sphere-viewer/core": "^5.0.1", "@photo-sphere-viewer/markers-plugin": "^5.0.1", "@react-google-maps/api": "~2.13.1", "axios": "~0.27.2", "mobx": "~6.6.2", "mobx-react-lite": "~3.4.0", "next": "~12.3.1", "pure-react-carousel": "~1.29.0", "react": "~18.2.0", "react-compare-image": "~3.1.0", "react-dom": "~18.2.0", "react-photo-sphere-viewer": "^3.1.0-psv5.0.1", "react-slick": "^0.29.0", "react-swipeable": "~7.0.0" },

[Elius94]

Hello! I think that you have to use it with: instance.getPlugin('markers') Or 'Marker'. Please, try and let me know. I'm out of office untill Monday and I don't have the laptop with me 😉

[polkakropka]

Thank you for your answer, but it doesn't work... any other idea? I will be very grateful.

[Elius94]

Ok, and what if you try this:

const markersPlugs: MarkersPlugin = instance.getPlugin(MarkersPlugin);

Without the quotes, according to the library docs. In my case it works

[Elius94]

In this example it works: https://codesandbox.io/s/sandbox-react-photo-sphere-viewer-by-elius94-j064sm?file=/src/App.js

[polkakropka]

I know this example, I did exactly the same, but in next.js/typescript, where I should loud the plugin dynamically:

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

it doesn't work. Everything looks correct, I don't know....

[Elius94]

Unfortunately I don't know Next.js, I'll try something in the next days but is not in my comfort zone ahah

[mkubdev]

@polkakropka Hi 👋🏻 ! The next.js example doesn't work? Didn't verify since #5 is merged ! Keep you in touch asap.

[polkakropka]

Hi @mkubdev Do you have any update? Best Regards K.

[Elius94]

Hi Guys, do you have some news about this issue?