react-coverflow with Next.js and react.js window is not defined #66

Activity

1. shayanpaul91 commented on Jun 13, 2019

   

   shayanpaul91

   on Jun 13, 2019 via email

   More actions

   Ok

   …

   On Thu, 13 Jun 2019, 4:30 pm Divyesh Parmar, ***@***.***> wrote: The project has been setup with React.js and Next.js for server-side-rendering maybe this is something related to SSR being an annoyance to the component to render. Whenever I add the react-coverflow as give in the example here <http://andyyou.github.io/react-coverflow/> but it just shows the following error: window is not definedReferenceError: window is not defined at Object.<anonymous> (C:\some-website\node_modules\react-coverflow\dist\react-coverflow.js:1:266) at Module._compile (internal/modules/cjs/loader.js:776:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:690:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.<anonymous> (C:\some-website\node_modules\react-coverflow\main.js:1:18) at Module._compile (internal/modules/cjs/loader.js:776:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:690:17) at require (internal/modules/cjs/helpers.js:25:18) I tried the solution from this issue discussion: #39 <#39> but the current ESLint setup doesn't allow me to use if(window) {import Converflow from 'react-coverflow'';}; anyways that will check if the window object is there or not and then won't import anything if it couldn't find it. So can please someone suggest, guide, advise on how to solve or overcome this, maybe any work around for that — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#66?email_source=notifications&email_token=AH4NYYOFH3K6FZTBAINALKLP2ISGVA5CNFSM4HXYMWD2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GZJBUDQ>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AH4NYYMUETTO774BO2NL52TP2ISGVANCNFSM4HXYMWDQ> .

   👀React with 👀1Reacted by Divyesh Parmar
2. asalem1 commented on Jun 14, 2019

   

   asalem1

   on Jun 14, 2019

   Collaborator

   More actions

   @Tapudp do you happen to have a code snippet where I could see how you're using react-coverflow? I've been bogged down at work lately and have been trying to reduce the dependency size so this issue might take a little bit to resolve. One option that might help with the SSR problem would be to conditionally render the component once the component has been mounted:

   state = {
     mounted: false,
   };
   
   componentDidMount() {
     this.setState({ mounted: true });
   }
   
   render() {
     const { mounted } = this.state;
     return (
        <div>
           {mounted &&  <Coverflow />}
        </div>
     );
   }
   

   Let me know if that works. It looks like the error stems from the window.open trigger so I can try and work out a solution soon
3. Tapudp commented on Jun 19, 2019

   

   Tapudp

   on Jun 19, 2019

   Author

   More actions

   @asalem1 yeah I guess it is because of the SSR not being able to find the source to it, but I have kind of found an work around to it, instead of importing I will do a require that also only when we have window object available. My code snippet:

   let Carousel = null;
   
   if (global.window) {
     // eslint-disable-next-line global-require
     Carousel = require('react-coverflow');
   }

   and then also don't forget to use the Carousel with a conditional otherwise it will give error similar to below:

   Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null.
   Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null.
       at invariant (C:\recro-website\node_modules\react-dom\cjs\react-dom-server.node.development.js:58:15)
       at ReactDOMServerRenderer.render (C:\recro-website\node_modules\react-dom\cjs\react-dom-server.node.development.js:3443:7)
       at ReactDOMServerRenderer.read (C:\recro-website\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29)
       at renderToString (C:\recro-website\node_modules\react-dom\cjs\react-dom-server.node.development.js:3646:27)
       at render (C:\recro-website\node_modules\next-server\dist\server\render.js:86:16)
       at renderPage (C:\recro-website\node_modules\next-server\dist\server\render.js:211:20)
       at Function.value (C:\recro-website\.next\server\static\development\pages\_document.js:914:41)
       at _callee$ (C:\recro-website\.next\server\static\development\pages\_document.js:2293:77)
       at tryCatch (C:\recro-website\node_modules\regenerator-runtime\runtime.js:62:40)
       at Generator.invoke [as _invoke] (C:\recro-website\node_modules\regenerator-runtime\runtime.js:288:22)
       at Generator.prototype.(anonymous function) [as next] (C:\recro-website\node_modules\regenerator-runtime\runtime.js:114:21)
       at asyncGeneratorStep (C:\recro-website\.next\server\static\development\pages\_document.js:341:24)
       at _next (C:\recro-website\.next\server\static\development\pages\_document.js:363:9)
       at C:\recro-website\.next\server\static\development\pages\_document.js:370:7
       at new Promise (<anonymous>)
       at new F (C:\recro-website\node_modules\core-js\library\modules\_export.js:36:28)
   

   for which I found this thread from SFO insightful : https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string

   {Carousel ? <Carousel slides={slides} /> : null}

   👍React with 👍2Reacted by Gabriel Ernesto Martínez Cánepa and Ari
4. will0225 commented on Jan 16, 2020

   

   will0225

   on Jan 16, 2020

   More actions

   Hi, TapuDp.
   I am getting error when i try to make cover-flower slider in my project.
   Below show error screenshot.

   Coverflow.js?2a0d:35 Uncaught TypeError: (0 , _react.createRef) is not a function
   at RadiumEnhancer.Coverflow (Coverflow.js?2a0d:35)
   at RadiumEnhancer.Coverflow (enhancer.js?f2be:322)
   at new Coverflow (enhancer.js?f2be:111)
   at ReactCompositeComponent.js:294
   at measureLifeCyclePerf (ReactCompositeComponent.js:74)
   at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:293)
   at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279)
   at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187)
   at Object.mountComponent (ReactReconciler.js:47)
   at ReactDOMComponent.mountChildren (ReactMultiChild.js:240)
   at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:699)
   at ReactDOMComponent.mountComponent (ReactDOMComponent.js:524)
   at Object.mountComponent (ReactReconciler.js:47)
   at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:370)
   at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
   at Object.mountComponent (ReactReconciler.js:47)
   Coverflow @ Coverflow.js?2a0d:35
   Coverflow @ enhancer.js?f2be:322
   Coverflow @ enhancer.js?f2be:111
   (anonymous) @ ReactCompositeComponent.js:294
   measureLifeCyclePerf @ ReactCompositeComponent.js:74
   _constructComponentWithoutOwner @ ReactCompositeComponent.js:293
   _constructComponent @ ReactCompositeComponent.js:279
   mountComponent @ ReactCompositeComponent.js:187
   mountComponent @ ReactReconciler.js:47
   mountChildren @ ReactMultiChild.js:240
   _createInitialChildren @ ReactDOMComponent.js:699
   mountComponent @ ReactDOMComponent.js:524
   mountComponent @ ReactReconciler.js:47
   performInitialMount @ ReactCompositeComponent.js:370
   mountComponent @ ReactCompositeComponent.js:257
   mountComponent @ ReactReconciler.js:47
   mountChildren @ ReactMultiChild.js:240
   _createInitialChildren @ ReactDOMComponent.js:699
   mountComponent @ ReactDOMComponent.js:524
   mountComponent @ ReactReconciler.js:47
   mountChildren @ ReactMultiChild.js:240
   _createInitialChildren @ ReactDOMComponent.js:699
   mountComponent @ ReactDOMComponent.js:524
   mountComponent @ ReactReconciler.js:47
   performInitialMount @ ReactCompositeComponent.js:370
   mountComponent @ ReactCompositeComponent.js:257
   mountComponent @ ReactReconciler.js:47
   mountChildren @ ReactMultiChild.js:240
   _createInitialChildren @ ReactDOMComponent.js:699
   mountComponent @ ReactDOMComponent.js:524
   mountComponent @ ReactReconciler.js:47
   performInitialMount @ ReactCompositeComponent.js:370
   mountComponent @ ReactCompositeComponent.js:257
   mountComponent @ ReactReconciler.js:47
   performInitialMount @ ReactCompositeComponent.js:370
   mountComponent @ ReactCompositeComponent.js:257
   mountComponent @ ReactReconciler.js:47
   performInitialMount @ ReactCompositeComponent.js:370
   mountComponent @ ReactCompositeComponent.js:257
   mountComponent @ ReactReconciler.js:47
   performInitialMount @ ReactCompositeComponent.js:370
   mountComponent @ ReactCompositeComponent.js:257
   mountComponent @ ReactReconciler.js:47
   performInitialMount @ ReactCompositeComponent.js:370
   mountComponent @ ReactCompositeComponent.js:257
   mountComponent @ ReactReconciler.js:47
   performInitialMount @ ReactCompositeComponent.js:370
   mountComponent @ ReactCompositeComponent.js:257
   mountComponent @ ReactReconciler.js:47
   performInitialMount @ ReactCompositeComponent.js:370
   mountComponent @ ReactCompositeComponent.js:257
   mountComponent @ ReactReconciler.js:47
   mountComponentIntoNode @ ReactMount.js:105
   perform @ Transaction.js:138
   batchedMountComponentIntoNode @ ReactMount.js:127
   perform @ Transaction.js:138
   batchedUpdates @ ReactDefaultBatchingStrategy.js:63
   batchedUpdates @ ReactUpdates.js:98
   _renderNewRootComponent @ ReactMount.js:321
   _renderSubtreeIntoContainer @ ReactMount.js:402
   render @ ReactMount.js:423
   (anonymous) @ index.js:37
   webpack_require @ bootstrap c9af91c00405fac8539e:19
   (anonymous) @ noteworthy.jsx:1
   webpack_require @ bootstrap c9af91c00405fac8539e:19
   (anonymous) @ bootstrap c9af91c00405fac8539e:62
   (anonymous) @ bootstrap c9af91c00405fac8539e:62
   Show 37 more frames
   ReactDOMComponentTree.js:107 Uncaught TypeError: Cannot read property '__reactInternalInstance$umomgjhktk' of null
   at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:107)
   at findParent (ReactEventListener.js:39)
   at handleTopLevelImpl (ReactEventListener.js:68)
   at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:138)
   at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:63)
   at Object.batchedUpdates (ReactUpdates.js:98)
   at dispatchEvent (ReactEventListener.js:150)

   could you please check issue?
   thanks
5. TheAngryBirdd commented on Jul 7, 2020

   

   TheAngryBirdd

   on Jul 7, 2020

   More actions

   const Coverflow = dynamic(
   () => import ('react-coverflow'),
   {
   ssr: false
   }
   )

   use this to disable server side rendering to avoid window issue
6. Majorfi commented on Mar 24, 2022

   

   Majorfi

   on Mar 24, 2022

   More actions

   Indeed, dynamic is the right way to go

   import	React		from	'react';
   import	dynamic		from	'next/dynamic';
   
   export default function YourFunction(props) {
   	const	[withWindow, set_withWindow] = React.useState(false);
   	const	Coverflow = React.useRef(<div />);
   
   	React.useLayoutEffect(() => {
   		Coverflow.current = dynamic(() => import('react-coverflow'));
   		set_withWindow(true);
   	}, []);
   
   	if (!withWindow) {
   		return null;
   	}
   	return (
   		<Coverflow.current ...>
   			{...}
   		</Coverflow.current>
   	);
   }

   ❤️React with ❤️1Reacted by Tarif Al Hasan
7. tarifalhasan commented on Feb 3, 2023

   

   tarifalhasan

   on Feb 3, 2023

   More actions

   not working
8. Rudrava-fleapo commented on Mar 2, 2023

   

   Rudrava-fleapo

   on Mar 2, 2023

   More actions

   Type script version

   "use client";
   
   import dynamic from "next/dynamic";
   import React, { ComponentType, ReactElement, ReactNode } from "react";
   
   const Carousel = ({ productshot }: { productshot: any }) => {
     const [withWindow, set_withWindow] = React.useState(false);
     const Coverflow = React.useRef<
       ComponentType<{
         children: any;
         width: number;
         height: number;
         displayQuantityOfSide: number;
         navigation: boolean;
         enableHeading: boolean;
       }>
     >(() => <div />);
   
     React.useLayoutEffect(() => {
       Coverflow.current = dynamic(() => import("react-coverflow"));
       set_withWindow(true);
     }, []);
   
     if (!withWindow) {
       return null;
     }
     return (
       <Coverflow.current ...  >
         ...
       </Coverflow.current>
     );
   };
   
   export default Carousel;