Error: useEvents must be used within a EventsContext.Provider

[tinspham209]

Hi,

I'm build the Lightbox library, and using yet-another-react-lightbox to render the image & video.

It's works well on storybook

but when build the lib by rollup and publishing to npm, installing to use my lib, it returns an error when previewing the Image.

Error: useEvents must be used within a EventsContext.Provider

Can someone help to to resolve it, or help to on the correct rollup config 🥲

this is my code in the lib:

import React from 'react';
import { Lightbox as YetLightbox } from 'yet-another-react-lightbox';
import Download from 'yet-another-react-lightbox/plugins/download';
import Fullscreen from 'yet-another-react-lightbox/plugins/fullscreen';
import Thumbnails from 'yet-another-react-lightbox/plugins/thumbnails';
import 'yet-another-react-lightbox/plugins/thumbnails.css';
import Video from 'yet-another-react-lightbox/plugins/video';
import Zoom from 'yet-another-react-lightbox/plugins/zoom';
import 'yet-another-react-lightbox/styles.css';
import { LightboxMediaProps } from '.';

const LightboxMedia = ({ onDownload, ...props }: LightboxMediaProps) => {
  return (
    <YetLightbox
      data-name="light-box__media"
      download={{ download: onDownload }}
      {...props}
      plugins={[Fullscreen, Thumbnails, Video, Zoom, Download]}
    />
  );
};

export default LightboxMedia;

[igordanchenko]

I'm afraid there aren't enough details to troubleshoot the issue you are experiencing. Please consider posting a link to your npm package and a minimal demo reproducing the issue.

Off the top of my head, I'd suggest verifying that you do not have non-deduplicated react dependencies in your project.

npm ls react

Also, make sure that your library doesn't bundle react, but rather requires it as a peerDependency.