Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

"window is not defined" error in Next.js 14 #548

Open
Matthew-owo opened this issue Jan 2, 2024 · 8 comments
Open

"window is not defined" error in Next.js 14 #548

Matthew-owo opened this issue Jan 2, 2024 · 8 comments

Comments

@Matthew-owo
Copy link

I'm trying to use formio in next js, but I get the following error, but the form seems to render successfully.
Am I using formio correctly? Or does formio not support next js?

Sample Code:

"use client";
import { Form } from "@formio/react";

const Page = () => {
  return (
    <>
      <Form src="https://examples.form.io/example" />
    </>
  );
};

export default Page;

Terminal:

 ⨯ node_modules\formiojs\providers\storage\s3.js (54:22) @ window
 ⨯ ReferenceError: window is not defined
    at __webpack_require__ (C:\Users\user\development\my-app\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (C:\Users\user\development\my-app\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (C:\Users\user\development\my-app\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (C:\Users\user\development\my-app\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (C:\Users\user\development\my-app\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (C:\Users\user\development\my-app\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (C:\Users\user\development\my-app\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (C:\Users\user\development\my-app\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (C:\Users\user\development\my-app\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (C:\Users\user\development\my-app\.next\server\webpack-runtime.js:33:43)
    at eval (./src/app/formioreact/page.tsx:7:71)
    at (ssr)/./src/app/formioreact/page.tsx (C:\Users\user\development\my-app\.next\server\app\formioreact\page.js:228:1)
    at __webpack_require__ (C:\Users\user\development\my-app\.next\server\webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)
null

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@formio/js": "^5.0.0-rc.37",
    "@formio/react": "^5.3.0",
    "formiojs": "^4.18.0",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "typescript": "^5"
  }
}
@viralP1
Copy link

viralP1 commented Jan 19, 2024

I have a basic setup of the app recommended in the documentation and facing a similar issue while building the NextJs React app.

Build error occurred
ReferenceError: window is not defined
at Object. (/app/node_modules/formiojs/providers/storage/s3.js:54:23)
at Module._compile (node:internal/modules/cjs/loader:1198:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
at Module.load (node:internal/modules/cjs/loader:1076:32)
at Function.Module._load (node:internal/modules/cjs/loader:911:12)
at Module.require (node:internal/modules/cjs/loader:1100:19)
at require (node:internal/modules/cjs/helpers:119:18)
at Object. (/app/node_modules/formiojs/providers/storage/index.js:9:33)
at Module._compile (node:internal/modules/cjs/loader:1198:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10) {
type: 'ReferenceError'

@brendanbond
Copy link
Contributor

brendanbond commented Jan 24, 2024 •
edited
Loading

Hey guys @viralP1 @Matthew-owo I am currently working on this issue, but please help me understand something: does this issue get resolved with a regular old check for window? In other words, because Form.io is currently a client-side rendering engine, if you change your component to something like this:

const Page = () => {
  return (
    <>
      typeof window === 'undefined' ? null : <Form src="https://examples.form.io/example" />
    </>
  );
};

does it work? Or does it still not like the actual imports of Form.io? FWIW I believe this is the recommended approach for client components with client-side-only code.

@viralP1
Copy link

viralP1 commented Jan 24, 2024 •
edited
Loading

Yes @brendanbond the approach you suggested is the typical way to handle Client Side Rendering (CSR) in the next.js. I implemented that solution in my project but it didn't work for me.

This is another approach I found:
import dynamic from 'next/dynamic' const Form = dynamic(() => import('@formio/react').then(module => module.Form), { ssr: false })

Now you can use the Form object as you need

@fowlerwill
Copy link

Any update on this? there are still issues rendering in nextjs (e.g. choice.js not working because of this dynamic load)

@mdkacode
Copy link 

(base) mayankdwivedi@192 games % yarn dev
yarn run v1.22.22
$ next dev
  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000
  - Environments: .env

 ✓ Starting...
 ✓ Ready in 3.1s
 ○ Compiling / ...
 ✓ Compiled / in 3.3s (515 modules)
 GET / 200 in 3683ms
 ✓ Compiled in 375ms (252 modules)
 ○ Compiling /_not-found ...
 ✓ Compiled /_not-found in 579ms (504 modules)
 GET /sw.js 404 in 709ms
 GET / 200 in 97ms
 GET /sw.js 404 in 29ms
 GET /sw.js 404 in 67ms
 GET /sw.js 404 in 58ms
 GET / 200 in 126ms
 GET / 200 in 32ms
 ○ Compiling /_not-found ...
 ✓ Compiled /_not-found in 819ms (534 modules)
 GET /favicon.ico 200 in 1015ms
 GET /sw.js 404 in 735ms
 GET /sw.js 404 in 27ms
 GET /sw.js 404 in 63ms
 GET / 200 in 170ms
 GET /favicon.ico 200 in 12ms
 GET /firebase-messaging-sw.js 404 in 34ms
 ○ Compiling /startPage ...
 ✓ Compiled /startPage in 1851ms (749 modules)
Failed to generate cache key for https://web-log-report.rtcplus.com/video/v1/webrtc_log/
 ⨯ ReferenceError: location is not defined
    at eval (./src/utils/webrtc.ts:13:69)
    at (ssr)/./src/utils/webrtc.ts (/Users/mayankdwivedi/Documents/sukoon/games/.next/server/app/startPage/page.js:437:1)
    at __webpack_require__ (/Users/mayankdwivedi/Documents/sukoon/games/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/startPage/page.tsx:12:71)
    at (ssr)/./src/app/startPage/page.tsx (/Users/mayankdwivedi/Documents/sukoon/games/.next/server/app/startPage/page.js:338:1)
    at Object.__webpack_require__ [as require] (/Users/mayankdwivedi/Documents/sukoon/games/.next/server/webpack-runtime.js:33:42)
    at JSON.parse (<anonymous>)
digest: "338679978"
 GET /startPage?level=1&expertId=668b59bc0dd1d65ce410b563&uuid=172388&type=sarathi&userName=mayank 500 in 2190ms
 GET /firebase-messaging-sw.js 404 in 49ms
ReferenceError: window is not defined
    at e.value (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:213279)
    at e.<anonymous> (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:212756)
    at l (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:54237)
    at Generator.<anonymous> (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:55563)
    at Generator.next (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:54645)
    at Dg (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:60117)
    at a (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:60313)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ⨯ unhandledRejection: ReferenceError: window is not defined
    at e.value (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:213279)
    at e.<anonymous> (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:212756)
    at l (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:54237)
    at Generator.<anonymous> (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:55563)
    at Generator.next (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:54645)
    at Dg (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:60117)
    at a (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:60313)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ⨯ unhandledRejection: ReferenceError: window is not defined
    at e.value (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:213279)
    at e.<anonymous> (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:212756)
    at l (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:54237)
    at Generator.<anonymous> (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:55563)
    at Generator.next (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:54645)
    at Dg (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:60117)
    at a (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:60313)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ⨯ ReferenceError: location is not defined
    at eval (./src/utils/webrtc.ts:13:69)
    at (ssr)/./src/utils/webrtc.ts (/Users/mayankdwivedi/Documents/sukoon/games/.next/server/app/startPage/page.js:437:1)
    at __webpack_require__ (/Users/mayankdwivedi/Documents/sukoon/games/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/startPage/page.tsx:12:71)
    at (ssr)/./src/app/startPage/page.tsx (/Users/mayankdwivedi/Documents/sukoon/games/.next/server/app/startPage/page.js:338:1)
    at Object.__webpack_require__ [as require] (/Users/mayankdwivedi/Documents/sukoon/games/.next/server/webpack-runtime.js:33:42)
    at JSON.parse (<anonymous>)
digest: "338679978"
 GET /startPage?level=1&expertId=668b59bc0dd1d65ce410b563&uuid=777&type=sarathi&userName=mayank 500 in 41ms
 GET /firebase-messaging-sw.js 404 in 36ms
Failed to generate cache key for https://web-log-report.rtcplus.com/video/v1/webrtc_log/
 ⨯ ReferenceError: location is not defined
    at eval (./src/utils/webrtc.ts:13:69)
    at (ssr)/./src/utils/webrtc.ts (/Users/mayankdwivedi/Documents/sukoon/games/.next/server/app/startPage/page.js:437:1)
    at __webpack_require__ (/Users/mayankdwivedi/Documents/sukoon/games/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/startPage/page.tsx:12:71)
    at (ssr)/./src/app/startPage/page.tsx (/Users/mayankdwivedi/Documents/sukoon/games/.next/server/app/startPage/page.js:338:1)
    at Object.__webpack_require__ [as require] (/Users/mayankdwivedi/Documents/sukoon/games/.next/server/webpack-runtime.js:33:42)
    at JSON.parse (<anonymous>)
digest: "338679978"
 GET /startPage?level=1&expertId=668b59bc0dd1d65ce410b563&uuid=777&type=sarathi&userName=mayank 500 in 61ms
ReferenceError: window is not defined
    at e.value (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:213279)
    at e.<anonymous> (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:212756)
    at l (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:54237)
    at Generator.<anonymous> (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:55563)
    at Generator.next (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:54645)
    at Dg (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:60117)
    at a (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:60313)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ⨯ unhandledRejection: ReferenceError: window is not defined
    at e.value (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:213279)
    at e.<anonymous> (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:212756)
    at l (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:54237)
    at Generator.<anonymous> (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:55563)
    at Generator.next (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:54645)
    at Dg (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:60117)
    at a (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:60313)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ⨯ unhandledRejection: ReferenceError: window is not defined
    at e.value (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:213279)
    at e.<anonymous> (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:212756)
    at l (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:54237)
    at Generator.<anonymous> (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:55563)
    at Generator.next (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:54645)
    at Dg (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:60117)
    at a (/Users/mayankdwivedi/Documents/sukoon/games/node_modules/@byteplus/rtc/index.min.js:6:60313)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 GET /favicon.ico 200 in 19ms

What shall we do here I am not getting any solution, and I do not have any control over node_modules, Please suggest

Screenshot 2024-07-17 at 12 41 24 PM

@brendanbond
Copy link
Contributor

@fowlerwill @mdkacode what version of the library are you using? I've made some updates in master (should be released officially relatively soon) that should solve these issues (although you'll still have to use dynamic imports for now).

@SukoonAdmin
Copy link

I am using 14.2

@brendanbond
Copy link
Contributor

@SukoonAdmin version of the @formio/react library

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@fowlerwill @mdkacode @brendanbond @viralP1 @Matthew-owo @Tatsiana8 @SukoonAdmin