Framework7: ReferenceError: window is not defined when using NextJs

[dieguit]

• Framework7 version: [email protected]
• React.js version: [email protected]
• 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)

[nolimits4web]

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

[dieguit]

Sorry for the late response, here is a repo: https://github.com/dieguit/tmp-framwork7-nextjs
Just yarn && yarn dev to start the dev environment.

[cruzlutor]

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

[AlexSmirnov9107]

any updates?

[hongnk]

I made it to work here:
_app.js.txt

note: still small error cannot redefined $f7, but it willr eload and work, perhaps can solve by movng f7 initialize code to index.js

[AlexSmirnov9107]

[hongnk]

@AlexSmirnov9107 you can follow the sample code I posted earlier (do not import 'framework7-react')

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.