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

[Tapudp]

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

[shayanpaul91]

Ok

On Thu, 13 Jun 2019, 4:30 pm Divyesh Parmar, notifications@github.com 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 .

[asalem1]

@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

[Tapudp]

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

[will0225]

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

[TheAngryBirdd]

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

use this to disable server side rendering to avoid window issue

[Majorfi]

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

[tarifalhasan]

not working

[Rudrava-fleapo]

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;