diff --git a/example/src/pages/unmounttest.tsx b/example/src/pages/unmounttest.tsx
new file mode 100644
index 0000000..9563a41
--- /dev/null
+++ b/example/src/pages/unmounttest.tsx
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import { GetStaticProps } from 'next';
+import { Box, Text, Flex } from 'rebass';
+import SbEditable from 'storyblok-react';
+import { sdk } from '~/lib/graphqlClient';
+import { WithStoryProps, useStory, Image } from '@storyofams/storyblok-toolkit';
+
+type GalleryProps = WithStoryProps;
+
+const Gallery = ({ story: providedStory }: GalleryProps) => {
+ const storyProp = useStory(providedStory);
+
+ const [story, setStory] = useState(storyProp);
+
+ useEffect(() => {
+ setStory(null);
+ }, []);
+
+ return (
+
+
+ Gallery
+
+ {!!story && (
+
+
+ {story?.content?.images?.map((image) => (
+
+
+
+
+
+ ))}
+
+
+ )}
+
+ );
+};
+
+export default Gallery;
+
+export const getStaticProps: GetStaticProps = async () => {
+ let story;
+ let notFound = false;
+
+ try {
+ story = (await sdk.galleryItem({ slug: 'gallery' })).GalleryItem;
+ } catch (e) {
+ notFound = true;
+ }
+
+ return {
+ props: {
+ story,
+ },
+ notFound,
+ // revalidate: 60,
+ };
+};
diff --git a/src/image/__tests__/createIntersectionObserver.test.tsx b/src/image/__tests__/createIntersectionObserver.test.tsx
index 8e018f7..8b38e07 100644
--- a/src/image/__tests__/createIntersectionObserver.test.tsx
+++ b/src/image/__tests__/createIntersectionObserver.test.tsx
@@ -153,4 +153,20 @@ describe('[image] createIntersectionObserver', () => {
expect(optionsMock).toHaveBeenLastCalledWith({ rootMargin: '1250px' });
});
+
+ it('should not observe if target doesnt exist', async () => {
+ const callbackMock = jest.fn();
+ const component =
;
+
+ act(() => {
+ render(component);
+ });
+
+ const result = await createIntersectionObserver(
+ document.querySelector('#notexistant'),
+ callbackMock,
+ );
+
+ expect(result).toBeNull();
+ });
});
diff --git a/src/image/createIntersectionObserver.ts b/src/image/createIntersectionObserver.ts
index 32362ef..25e40d7 100644
--- a/src/image/createIntersectionObserver.ts
+++ b/src/image/createIntersectionObserver.ts
@@ -38,6 +38,10 @@ export const createIntersectionObserver = async (
},
);
+ if (!el) {
+ return null;
+ }
+
// Add element to the observer
io.observe(el);