PSV error when using plugins that were built from sources

[EVOsparkLP]

Describe the bug

When I install the Photo-Sphere-Viewer and some plugins with npm everything works fine.

But as I need to modify an existing plugin (gyroscope) I try to build the plugin from sources. When this "self-built" plugin is added to the viewer, I receive the following error:
config.ts:216 Uncaught (in promise) PSVError: An undefined value was given for plugin 0.

There are no code modifications in the plugin. I'm just trying to get the build process running.

What I did so far:

• cloned the Photo-Sphere-Viewer repository

• npm install

• npm run build (builds without errors; build is available in dist folder)

• included this build in my project:

import { Viewer } from '../../Photo-Sphere-Viewer-main/packages/core/dist';
import '../../Photo-Sphere-Viewer-main/packages/core/dist/index.css';
import { GyroscopePlugin } from '../../Photo-Sphere-Viewer-main/packages/gyroscope-plugin/dist';

...

this.viewer = new Viewer({
    container: document.querySelector('#psvContainer'),
    panorama: url,
    plugins: [
        [GyroscopePlugin, {
            moveMode: "smooth",
            absolutePosition: true,
            touchmove: false
        }]
    ],
});

• npm run build (builds without errors)

I tested the integration also with other plugins which did not work either. So I guess the issue is not specific for the gyroscope plugin.

Maybe this is no real bug, but I am just importing the build files in a wrong way? Can someone who has ever modiefied a plugin, share the steps to get this running? Thanks.

Online demo URL

No response

Photo Sphere Viewer version

5.11.1

Plugins loaded

Gyroscope

OS & browser

Windows, Chrome

Additional context

No response

[mistic100]

Did you put break points to check what is the actual value of GyroscopePlugin ?

Also try import * as GyroscopePlugin to check the whole JS module.

[EVOsparkLP]

Thanks for your hint. I put a break point and checked the value of the GyroscopePlugin at the point when the viewer is instantiated together with the plugin. There is no difference between the version imported via npm and the local version.

What I found out:
The issue also persists when the plugin is imported via npm and only the core is built locally. Therefore I tried to use the core from npm and only the plugin built from local files:

import { Viewer } from '@photo-sphere-viewer/core'; // core from npm
import "@photo-sphere-viewer/core/index.css"
import { GyroscopePlugin } from '../../Photo-Sphere-Viewer-main/packages/gyroscope-plugin/dist'; // built from local files

In this case the plugin works fine, as long as I use
npm run dev
If I try to build the sources for production
npm run build
then there is still the same error: Uncaught (in promise) PSVError: An undefined value was given for plugin 0.

BTW, the import with "* as" makes no difference. The error remains the same
import * as GyroscopePlugin from '../../Photo-Sphere-Viewer-main/packages/gyroscope-plugin/dist';

[mistic100]

for sure your locally built "Photo-Sphere-Viewer-main/packages/gyroscope-plugin/dist" has somewhere an import from "@photo-sphere-viewer/core" which resolves successfully if you also have the package available.

The problem is that this check will never work because you actually have two different AbstractPlugin available
https://github.com/mistic100/Photo-Sphere-Viewer/blob/main/packages/core/src/plugins/AbstractPlugin.ts#L119

The solution : use the imports map as described in the setup guide https://photo-sphere-viewer.js.org/guide/#your-first-viewer
And always use package name when importing stuff, only the imports map will reference the local files.
This way you will have only one core module.

[mistic100]

<script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
            "@photo-sphere-viewer/core": "../../Photo-Sphere-Viewer-main/packages/core/dist/index.module.js"
        }
    }
</script>

[mistic100]

If you use a bundler you will have to configure it properly to make @photo-sphere-viewer/core always reolve to your local files.

[mistic100]

Closing as not an issue with the lib.

[EVOsparkLP]

Thanks for your fast support! I got it running.
As I am using vue.js I could not use the suggested way with the importmap.

Therefore I changed the package.json like this:

"@photo-sphere-viewer/core": "^5.11.1",
"@photo-sphere-viewer/gyroscope-plugin": "file:resources/js/Photo-Sphere-Viewer-main/packages/markers-plugin/dist",

Then I could import the modules just like before:

import { Viewer } from '@photo-sphere-viewer/core';
import "@photo-sphere-viewer/core/index.css"
import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin';