ReferenceError: document is not defined about react-insta-stories

[alexboateng]

In react applications with SSR and can be used by Lazy loading the component and disable SSR

import dynamic from "next/dynamic";

const DynamicComponentWithNoSSR = dynamic(() => import("../components/Stories"), {
  ssr: false,
});

export default () => <DynamicComponentWithNoSSR />;

[prafulrajhm]

Any solution for this?

I am facing same issue when I am using in Next.JS

[AbdeenM]

Most probably this library is meant for reactjs web applications not react native. what a shame, just realized this after installing it and getting this error too

[mohitk05]

Yes, this is meant to be used in React application, but even for server rendered apps this error would show up because the final build contains window object. The reason is style-loader including window into the final build (webpack-contrib/style-loader#109). One solution could be not importing styles until component is mounted. There are few solutions mentioned on this issue, we can implement one of these.

[iMerica]

Thanks for working on this project. I've forked it and switched to isomorphic-style-loader to render this component server-side in Next.js.

I would love to submit a pull request, but the way you structured this project is very unusual. Normally, I'm able to fork a repo, make an enhancement on my fork and update my package.json to point to my personal Github fork. But that doesn't work because the root package.json doesn't have an entrypoint. (see #64)

Please consider moving packages/react-native-stories to a separate github repo and move packages/react-insta-stories/* to the root of this repo.

[iMerica]

Upon further investigation, it appears that this package is not being built properly. There are no actual build dependencies in the package.json.

"dependencies": {}

You appear to be packaging the devDependencies into the final build that is being published to NPM. Nothing in this package requires window or document.

[federicoromandemo]

Any solution for this?

I am facing same issue when I am using in Next.JS

I am facing the same problem with Expo.

[prafulrajhm]

Any solution for this?
I am facing same issue when I am using in Next.JS

I am facing the same problem with Expo.

@xelahaippa solution worked for me, I created a component using <DynamicComponentWithNoSSR />

[KishanGujarati]

any update on this??

I am facing same issue when I am using in Next.JS

[cbasJS]

I had the same issue!!

I resolved using @loadable/component module.

// Packages
import React from 'react'
import loadable from '@loadable/component'

// Components
import Layout from '../../components/Layout'

// Loadable components
const BeerStoryContent = loadable(() => import('../../components/BeerStoryContent'))

const ContainerComponent = () => {
  return (
   <Layout><BeerStoryContent /></Layout>
 )
}

export default ContainerComponent

[Manishbatra4]

@prafulrajhm can you show how I am facing same problem in nextjs

[cbasJS]

@prafulrajhm can you show how I am facing same problem in nextjs

I really recommend you try using @loadable/component

I´m using Gatsby JS and this module is working perfectly for me =)

[mohitk05]

The module can now be loaded without any helper package. The fix has been added in v2.2.2!