question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ReferenceError: window is not defined when using NextJs

See original GitHub issue
  • Framework7 version: framework7@5.2.0
  • React.js version: react@16.12.0
  • Platform and Target: Chrome browser

Describe the bug

When using Next-JS, importing framework7-react causes this error (Call stack in the bottom). This issue is somehow related: https://github.com/framework7io/framework7/issues/2498

To Reproduce

Steps to reproduce the behavior:

  1. Install next-js and create a simple app
  2. Install f7 and f7-react
  3. In the main page, import Framework7React from 'framework7-react';
  4. Error makes the app crash

Expected behavior

Server-side rendering should be supported with ssr-window

Actual Behavior

App crashing

Trace:

ReferenceError: window is not defined
    at [...]/app/.next/server/static/development/pages/_app.js:4109:34
    at module.exports../node_modules/framework7-react/framework7-react.bundle.js (/Users/dieguit/projects/victu/victu-app/.next/server/static/development/page
s/_app.js:2714:28)
    at Object../node_modules/framework7-react/framework7-react.bundle.js (/Users/dieguit/projects/victu/victu-app/.next/server/static/development/pages/_app.j
s:2715:3)
    at __webpack_require__ (/Users/dieguit/projects/victu/victu-app/.next/server/static/development/pages/_app.js:23:31)
    at Module../pages/_app.js (/Users/dieguit/projects/victu/victu-app/.next/server/static/development/pages/_app.js:66083:74)
    at __webpack_require__ (/Users/dieguit/projects/victu/victu-app/.next/server/static/development/pages/_app.js:23:31)
    at Object.0 (/Users/dieguit/projects/victu/victu-app/.next/server/static/development/pages/_app.js:66115:18)
    at __webpack_require__ (/Users/dieguit/projects/victu/victu-app/.next/server/static/development/pages/_app.js:23:31)
    at /Users/dieguit/projects/victu/victu-app/.next/server/static/development/pages/_app.js:91:18
    at Object.<anonymous> (/Users/dieguit/projects/victu/victu-app/.next/server/static/development/pages/_app.js:94:10)
    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)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
nolimits4webcommented, Dec 11, 2019

Would be great maybe to see some simple/demo repo where it can be reproduced

1reaction
cruzlutorcommented, Feb 19, 2020

Do you have any news about this? I’m interested in to use framework7 components on small Nextjs project, Is it ready for SSR?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to solve Next.js window is not defined
ReferenceError : window is not defined is a pretty common error you may run into when using Next.js for the first time but...
Read more >
Window is not defined in Next.js React app - Stack Overflow
Next.js is universal, which means it executes code first server-side, then client-side. The window object is only present client-side, so ...
Read more >
Fix for Next.js ReferenceError window is not defined
The window object is the reference to an open window in a browser. Therefore, the window object is only available on the client-side....
Read more >
How to Fix "window is not defined" in Next.js - Upmostly
This issue has to do with Server-Side Rendering in Next.js. Next.js will by default try to use SSR for your site. This means...
Read more >
How to fix window is not defined error in Next.js
As you can see the error occurs in the terminal itself. That means it is a compilation error. Next.js is compiled/built on Node.js...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found