react-coverflow with Next.js and react.js window is not defined
#66
Comments
|
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>
.
|
|
@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: Let me know if that works. It looks like the error stems from the |
|
@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 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: 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} |
|
Hi, TapuDp. Coverflow.js?2a0d:35 Uncaught TypeError: (0 , _react.createRef) is not a function could you please check issue? |
|
const Coverflow = dynamic( use this to disable server side rendering to avoid window issue |
|
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>
);
} |
|
not working |
|
Type script version |
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",I tried the solution from this issue discussion: #39
but the current ESLint setup doesn't allow me to use
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
The text was updated successfully, but these errors were encountered: