React 18 incompatibility

[MartinHajducik]

Describe the bug

Hi All,

I tried to create new react project and install jsonforms as per https://jsonforms.io/docs/tutorial . During step 2 I am getting following error

npm install --save @jsonforms/core
npm install --save @jsonforms/react

PS C:_test\javascript\react18_jsonforms> npm install --save @jsonforms/react
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react18_jsonforms@0.1.0
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR! react@"^18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.12.0 || ^17.0.0" from @jsonforms/react@2.5.2
npm ERR! node_modules/@jsonforms/react
npm ERR! @jsonforms/react@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Expected behavior

npm install --save @jsonforms/react is expected to be compatible.

Steps to reproduce the issue

1. npx create-react-app react18_jsonforms
2. npm install --save @jsonforms/core
3. npm install --save @jsonforms/react
4. See error

Screenshots

No response

In which browser are you experiencing the issue?

Chrome

Framework

React

RendererSet

Material

Additional context

No response

[sdirix]

Thanks for the notice. We will up our range to React 18. You should be able to just ignore that error, JSON Forms should still work. If not, please let us know.

[MartinHajducik]

Thanks for the notice. We will up our range to React 18. You should be able to just ignore that error, JSON Forms should still work. If not, please let us know.

Hi , I tried to use --force during module installation which ended successfully. Then in particular .js file I am importing it , once application is compiled I am getting bellow error message.

import { JsonForms } from '@jsonforms/react';
import {
  materialRenderers,
  materialCells,
} from '@jsonforms/material-renderers';

I am getting below error

`ERROR in ./src/components/Main/Config.js 6:0-81
Module not found: Error: Can't resolve '@jsonforms/material-renderers' in 'C:\_test\react\dcg_configurator_ui_react18.1.0\src\components\Main'

ERROR in ./node_modules/json-schema-ref-parser/lib/resolvers/http.js 3:13-28
Module not found: Error: Can't resolve 'http' in 'C:\_test\react\dcg_configurator_ui_react18.1.0\node_modules\json-schema-ref-parser\lib\resolvers'
Did you mean './http'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\_test\react\dcg_configurator_ui_react18.1.0\node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }

ERROR in ./node_modules/json-schema-ref-parser/lib/resolvers/http.js 5:14-30
Module not found: Error: Can't resolve 'https' in 'C:\_test\react\dcg_configurator_ui_react18.1.0\node_modules\json-schema-ref-parser\lib\resolvers'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }

ERROR in ./node_modules/json-schema-ref-parser/lib/util/url.js 11:0-36
Module not found: Error: Can't resolve 'url' in 'C:\_test\react\dcg_configurator_ui_react18.1.0\node_modules\json-schema-ref-parser\lib\util'
Did you mean './url'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\_test\react\dcg_configurator_ui_react18.1.0\node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }`

My package.json dependencies bellow.

"dependencies": {
    "@jsonforms/core": "^2.5.2",
    "@jsonforms/react": "^2.5.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "buffer": "^6.0.3",
    "react": "^18.1.0",
    "react-bootstrap": "^2.3.1",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"

[sdirix]

Can you please try with the latest beta? The last release has node-only dependencies which are no longer automatically pollyfilled with Webpack v5.

[MartinHajducik]

Can you please try with the latest beta? The last release has node-only dependencies which are no longer automatically pollyfilled with Webpack v5.

Tried with below dependencies

"dependencies": {
    "@jsonforms/core": "^3.0.0-beta.1",
    "@jsonforms/material-renderers": "^3.0.0-beta.1",
    "@jsonforms/react": "^3.0.0-beta.1",
    "@mui/icons-material": "^5.6.2",
    "@mui/material": "^5.7.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "buffer": "^6.0.3",
    "react": "^18.1.0",
    "react-bootstrap": "^2.3.1",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"

getting

ERROR in ./node_modules/@mui/styled-engine/GlobalStyles/GlobalStyles.js 3:0-40
Module not found: Error: Can't resolve '@emotion/react' in 'C:\_test\react\dcg_configurator_ui_react18.1.0\node_modules\@mui\styled-engine\GlobalStyles'

ERROR in ./node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js 3:0-47
Module not found: Error: Can't resolve '@emotion/react' in 'C:\_test\react\dcg_configurator_ui_react18.1.0\node_modules\@mui\styled-engine\StyledEngineProvider'

ERROR in ./node_modules/@mui/styled-engine/index.js 6:0-39
Module not found: Error: Can't resolve '@emotion/styled' in 'C:\_test\react\dcg_configurator_ui_react18.1.0\node_modules\@mui\styled-engine'

ERROR in ./node_modules/@mui/styled-engine/index.js 30:0-62
Module not found: Error: Can't resolve '@emotion/react' in 'C:\_test\react\dcg_configurator_ui_react18.1.0\node_modules\@mui\styled-engine'

ERROR in ./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js 11:27-60
export 'ThemeContext' (imported as 'StyledEngineThemeContext') was not found in '@mui/styled-engine' (possible exports: GlobalStyles, StyledEngineProvider, default)

ERROR in ./node_modules/@mui/system/esm/index.js 1:0-88
export 'css' (reexported as 'css') was not found in '@mui/styled-engine' (possible exports: GlobalStyles, StyledEngineProvider, default)

ERROR in ./node_modules/@mui/system/esm/index.js 1:0-88
export 'keyframes' (reexported as 'keyframes') was not found in '@mui/styled-engine' (possible exports: GlobalStyles, StyledEngineProvider, default)

[sdirix]

We require @emotion/react and @emotion/styled as dependencies, i.e. you have to install them yourself. I'll add them to the peer dependency list.

[MartinHajducik]

@emotion

Yes, hurray ! That works. Thanks a lot

"dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@jsonforms/core": "^3.0.0-beta.1",
    "@jsonforms/material-renderers": "^3.0.0-beta.1",
    "@jsonforms/react": "^3.0.0-beta.1",
    "@mui/icons-material": "^5.6.2",
    "@mui/material": "^5.7.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "buffer": "^6.0.3",
    "react": "^18.1.0",
    "react-bootstrap": "^2.3.1",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

[sdirix]

Fixed issues with #1932