[Bug]: Typescript error when using plugins in Next.js #59
Description
What happened?
When executing next build a Typescript error is raised:
Linting and checking validity of types ...Failed to compile.
./src/components/MdxComponents/PanoramaViewer/PanoramaViewer.tsx:38:9
Type error: Type '(typeof AutorotatePlugin | { autorotateSpeed: string; autorotatePitch: string; })[][]' is not assignable to type '(PluginConstructor | [PluginConstructor, any])[]'.
Type '(typeof AutorotatePlugin | { autorotateSpeed: string; autorotatePitch: string; })[]' is not assignable to type 'PluginConstructor | [PluginConstructor, any]'.
Type '(typeof AutorotatePlugin | { autorotateSpeed: string; autorotatePitch: string; })[]' is not assignable to type 'PluginConstructor'.
Type '(typeof AutorotatePlugin | { autorotateSpeed: string; autorotatePitch: string; })[]' provides no match for the signature 'new (viewer: Viewer, config?: any): AbstractPlugin<any>'.
36 | height={'100%'}
37 | width={'100%'}
> 38 | plugins={plugins}
| ^
39 | ></ReactPhotoSphereViewer>
40 | </div>
41 | );
What should have happened?
It should pass the linter and do the build properly. The code is working properly using next dev.
Code
import { AutorotatePlugin } from '@photo-sphere-viewer/autorotate-plugin';
import dynamic from 'next/dynamic';
import { FC } from 'react';
import styles from '@/styles/documentation.module.scss';
const ReactPhotoSphereViewer = dynamic(
() =>
import('react-photo-sphere-viewer').then(
(mod) => mod.ReactPhotoSphereViewer,
),
{
ssr: false,
},
);
interface PanoramaViewerProps {
src: string;
}
export const PanoramaViewer: FC<PanoramaViewerProps> = ({ src }) => {
const plugins = [
[
AutorotatePlugin,
{
autorotateSpeed: '1rpm'
},
],
];
return (
<div id='panorama-viewer' className={styles.panorama}>
<ReactPhotoSphereViewer
src={src}
height={'100%'}
width={'100%'}
plugins={plugins}
></ReactPhotoSphereViewer>
</div>
);
};
Sandbox Link
No response
Library Version
6.0.0
What operating system are you using?
Ubuntu
What browser are you using?
None
Logs
Linting and checking validity of types ...Failed to compile.
./src/components/MdxComponents/PanoramaViewer/PanoramaViewer.tsx:38:9
Type error: Type '(typeof AutorotatePlugin | { autorotateSpeed: string; autorotatePitch: string; })[][]' is not assignable to type '(PluginConstructor | [PluginConstructor, any])[]'.
Type '(typeof AutorotatePlugin | { autorotateSpeed: string; autorotatePitch: string; })[]' is not assignable to type 'PluginConstructor | [PluginConstructor, any]'.
Type '(typeof AutorotatePlugin | { autorotateSpeed: string; autorotatePitch: string; })[]' is not assignable to type 'PluginConstructor'.
Type '(typeof AutorotatePlugin | { autorotateSpeed: string; autorotatePitch: string; })[]' provides no match for the signature 'new (viewer: Viewer, config?: any): AbstractPlugin<any>'.
36 | height={'100%'}
37 | width={'100%'}
> 38 | plugins={plugins}
| ^
39 | ></ReactPhotoSphereViewer>
40 | </div>
41 | );
Interest to fix the bug
- I would like to fix this bug!