[Bug]: Typescript error when using plugins in Next.js

[pacoorozco]

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!

[pacoorozco]

I've found a workaround which is adding the plugins directly as an array.

<ReactPhotoSphereViewer
        src={src}
        height={'100%'}
        width={'100%'}
        plugins={[
          [
            AutorotatePlugin,
            {
              autorotateSpeed: '1rpm',
              autorotatePitch: '3deg',
            },
          ],
        ]}
      ></ReactPhotoSphereViewer>

[Elius94]

hi! have you tried to add a explicit type definition to the array?

[pacoorozco]

Hi

I've tried several ones but maybe not the right one 😅

Can you suggest one?

Aquel que planta árboles bajo los que sabe muy bien que nunca se sentará, ha descubierto el auténtico significado de la vida.

-------- Mensaje original -------- El 5/8/24 18:39, Elia Lazzari ha escrito:

hi! have you tried to add a explicit type definition to the array?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>