react-coverflow icon indicating copy to clipboard operation
react-coverflow copied to clipboard
verified publisher icon andyyou

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

Open Tapudp opened this issue 6 years ago • 8 comments

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 but it just shows the following error: the version I'm using is : json"react-coverflow": "^0.2.20",

window is not defined
ReferenceError: 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: https://github.com/andyyou/react-coverflow/issues/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

Tapudp avatar Jun 13 '19 11:06 Tapudp

Ok

On Thu, 13 Jun 2019, 4:30 pm Divyesh Parmar, [email protected] 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. (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. (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 https://github.com/andyyou/react-coverflow/issues/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 https://github.com/andyyou/react-coverflow/issues/66?email_source=notifications&email_token=AH4NYYOFH3K6FZTBAINALKLP2ISGVA5CNFSM4HXYMWD2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GZJBUDQ, or mute the thread https://github.com/notifications/unsubscribe-auth/AH4NYYMUETTO774BO2NL52TP2ISGVANCNFSM4HXYMWDQ .

shayanpaul91 avatar Jun 13 '19 11:06 shayanpaul91

@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

asalem1 avatar Jun 14 '19 14:06 asalem1

@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}

Tapudp avatar Jun 19 '19 18:06 Tapudp

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

will0225 avatar Jan 16 '20 15:01 will0225

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

use this to disable server side rendering to avoid window issue

TheAngryBirdd avatar Jul 07 '20 18:07 TheAngryBirdd

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>
	);
}

Majorfi avatar Mar 24 '22 09:03 Majorfi