[BUG] Nextjs and Formio/react issue with navigator is not defined

[Matheus Cruz Rocha]

Environment

When I try to use the lib in integration with nextjs this error happens. It seems that is trying to access the navigator but doesn't check if the environment has this (browser).

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• Formio.js version: 5.2.4-rc.1
• Frontend framework: NextJS
• Browser: Chrome
• Browser version: 108.0.5359.124

Steps to Reproduce

1. Create a new project with NextJS
2. Import the form component from the lib
3. Render some form from the Form.io

Expected behavior

Load and render the form

Observed behavior

Error about navigator is not defined

For code or form JSON, please enclose in a code block:

import { useState } from "react";
import { Form } from "@formio/react";

const FormExample = () => {
  const [isLoadingForm, setIsLoadingForm] = useState(true);
  const onFormReady = () => setIsLoadingForm(false);
  const onSubmit = (data: any) => console.log("Form data: ", data);

  return (
    <div className="form-wrapper">
      {isLoadingForm ? <div>Loading form...</div> : null}

      <Form
        src="https://urbpoc.com/authoring-mtavufxrhgqeeng/addhazardwithsubmit"
        formReady={onFormReady}
        onSubmit={onSubmit}
      />
    </div>
  );
};

Error logged:

error - ReferenceError: navigator is not defined
    at Object.<anonymous> (/Users/matheus.rocha/Developer/urbint/dynamic-forms-poc-web-app-core/web/node_modules/formiojs/components/file/File.js:189:21)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/matheus.rocha/Developer/urbint/dynamic-forms-poc-web-app-core/web/node_modules/formiojs/components/index.js:40:36)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/matheus.rocha/Developer/urbint/dynamic-forms-poc-web-app-core/web/node_modules/formiojs/formio.form.js:119:42)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/matheus.rocha/Developer/urbint/dynamic-forms-poc-web-app-core/web/node_modules/formiojs/index.js:103:15)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/matheus.rocha/Developer/urbint/dynamic-forms-poc-web-app-core/web/node_modules/@formio/react/lib/components/Form.js:25:17)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/matheus.rocha/Developer/urbint/dynamic-forms-poc-web-app-core/web/node_modules/@formio/react/lib/components/index.js:16:13)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/matheus.rocha/Developer/urbint/dynamic-forms-poc-web-app-core/web/node_modules/@formio/react/lib/index.js:8:19)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@formio/react (/Users/matheus.rocha/Developer/urbint/dynamic-forms-poc-web-app-core/web/.next/server/pages/index.js:141:18) {
  page: '/'
}

[Matheus Cruz Rocha]

Doesn't support SSR, just read now. 😄 Gonna use the dynamic import