Error when using the package with nextjs

[anbturki]

Getting the following error.

When using the following example in a Nextjs page.

// pages/index.js
import React from "react";
import MaterialJsonSchemaForm from "react-jsonschema-form-material-ui";

import schema from "../schema.json";
import uiSchema from "../ui-schema.json";

export default () => {
  return <MaterialJsonSchemaForm schema={schema} uiSchema={uiSchema} />;
};

Version:
"react-jsonschema-form-material-ui": "^3.0.0-alpha.0"

[github-actions]

Hey 👋 Thanks for creating your first issue - Someone will get back to you on this shortly.

[vip-git]

Hi @anbturki - Thanks for your issue there.

Are you able to confirm which version you are currently on with react-jsonschema-form-material-ui in your package.json ?

Thanks

[anbturki]

@vip-git here you go "react-jsonschema-form-material-ui": "^3.0.0-alpha.0"

[vip-git]

Hi @anbturki - 3.0.0-alpha.0 is currently work in progress to support SSR .

Are you able to try 2.2.2 for the time being - 3.0.0 will be finalized end of next week so you can start using that from then onwards with nextjs.

[anbturki]

@vip-git
Yeah, Sure! let me give it a try.

Thank you for your response.

[anbturki]

@vip-git
I downgraded the version to "react-jsonschema-form-material-ui": "2.2.2" and still getting same issue.
Kindly, if you have time you can create a NextJS project and try it there.

[vip-git]

Hi @anbturki - I had a look this is related to following reasons

You might have mismatching versions of React and the renderer (such as React DOM)

If you look carefully currently we point to react 16.13.1 and nextjs has upgraded to 17.0.1 . We will be updating to 17.0.1 part of finalizing version 3.0.0.

I recommend in this case to wait for version 3.0.0 to be finalized i will try to have a patch available in coming days for 3.0.0-alpha.1 to address this issue specifically which has XHRSchema integration part of this PR

[anbturki]

Alright, I may wait until the 3.0.0 being ready and try again.
Hover, following is the content of my package.json in which there's no mismatch from myside.

{
  "name": "nextjs-json-form-schema-poc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "next": "10.0.7",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-jsonschema-form-material-ui": "2.2.2"
  }
}

[vip-git]

Yes if you set your package.json to as follows it should work

{
  "name": "nextjs-json-form-schema-poc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "next": "10.0.7",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-jsonschema-form-material-ui": "2.2.2"
  }
}

[vip-git]

@anbturki - I have created a example repo so you can give this a try here

• https://github.com/vip-git/nextjs-react-jsonschema-form-material-ui-example

I will close this issue for the time being and add you as a watcher for this PR so you know when this gets merged with react 17.0.1 so you can start using 3.0.0-alpha.1 if needed.

Thanks for raising this one.

[vip-git]

Hi @anbturki - Support with version 3 has been included with next js now.

Can be seen here

You would need to update to webpack 5 part of this change in your nextJS project.