Error when adding responsive attribute

[webface]

I'm using nextjs and material ui. When I try to set the component to responsive I get an error

ReferenceError: window is not defined
    at Object.<anonymous> (/Applications/MAMP/htdocs/PROJECTS/mui-resume/node_modules/react-flip-page/dist/index.js:1:316)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

Here is my code

<FlipPage orientation='horizontal' responsive={true}>
         
          <Paper className={classes.paper}>
          <Typography variant="h6" gutterBottom>
            Corus Entertainment 
          </Typography>
            <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius nulla id tellus auctor, ut vehicula ipsum finibus. Pellentesque vel nunc a mi tincidunt congue fringilla id ante. Pellentesque eu cursus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt lorem nec neque feugiat, sagittis feugiat odio pretium. Nullam malesuada neque aliquet leo aliquet rhoncus. Nunc ac tincidunt urna, sit amet mollis nunc. In ut porta dui. Praesent venenatis metus posuere, aliquet turpis at, posuere dui. Fusce dignissim lobortis augue, feugiat lacinia diam aliquet a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </Typography>
          </Paper>

          <Paper className={classes.paper}>
          <Typography variant="h6" gutterBottom>
            Target Directories
          </Typography>
            <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius nulla id tellus auctor, ut vehicula ipsum finibus. Pellentesque vel nunc a mi tincidunt congue fringilla id ante. Pellentesque eu cursus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt lorem nec neque feugiat, sagittis feugiat odio pretium. Nullam malesuada neque aliquet leo aliquet rhoncus. Nunc ac tincidunt urna, sit amet mollis nunc. In ut porta dui. Praesent venenatis metus posuere, aliquet turpis at, posuere dui. Fusce dignissim lobortis augue, feugiat lacinia diam aliquet a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </Typography>
          </Paper>

          <Paper className={classes.paper}>
          <Typography variant="h6" gutterBottom>
            Learn2 
          </Typography>
            <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius nulla id tellus auctor, ut vehicula ipsum finibus. Pellentesque vel nunc a mi tincidunt congue fringilla id ante. Pellentesque eu cursus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt lorem nec neque feugiat, sagittis feugiat odio pretium. Nullam malesuada neque aliquet leo aliquet rhoncus. Nunc ac tincidunt urna, sit amet mollis nunc. In ut porta dui. Praesent venenatis metus posuere, aliquet turpis at, posuere dui. Fusce dignissim lobortis augue, feugiat lacinia diam aliquet a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </Typography>
          </Paper>

        </FlipPage>

[darenju]

Hello,

Sorry for the long delay. This basically means the window object cannot be found in order to enable responsive mode. I have never used NextJS. You should check out their documentation for somehow enabling browser support, as that seems to be the problem here.

As my code is not using direct references to window, I have no control on when it is being used…

[saricden]

@darenju @webface Probably because NextJS renders twice, once as serverside (no window object present) and once clientside.