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:
- Install next-js and create a simple app
- Install f7 and f7-react
- In the main page,
import Framework7React from 'framework7-react';
- 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:
- Created 4 years ago
- Reactions:1
- Comments:9 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Would be great maybe to see some simple/demo repo where it can be reproduced
Do you have any news about this? I’m interested in to use framework7 components on small Nextjs project, Is it ready for SSR?