Material UI 14 dependency issue

General
1

I want to use JSONForms in my react typescript project that uses react v17, material ui v5.

I setup a separate “trial project” first with steps listed at Create a JSON Forms App - JSON Forms. The only deviation from those steps is that I have switched to react v17 because my main project has that dependency.

This trial project fails to compile. There are too many errors but most of them are probably related to two main errors that it is not able to resolve modules material-ui/core and material-ui/icons.

As per tutorial, I am installing Material UI 5 (mui/material). However, JSONForms is looking for Material 14. As I am still new to JavaScript world, need some guidance here. Am I missing something? Why is there Material 14 dependency?

There are just too many errors to post here. Posting just a snippet to give an idea about the errors.

Thanks

Failed to compile.

Module not found: Error: Can’t resolve ‘@material-ui/core’ in ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/@jsonforms/material-renderers/lib/additional’

WARNING in ./node_modules/js-yaml/lib/js-yaml/type/binary.js 9:15-40

Module not found: Error: Can’t resolve ‘buffer’ in ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/js-yaml/lib/js-yaml/type’

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: { “buffer”: require.resolve(“buffer/”) }’

  • install ‘buffer’

If you don’t want to include a polyfill, you can use an empty module like this:

resolve.fallback: { “buffer”: false }

WARNING in ./node_modules/ono/esm/constructor.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/constructor.ts’ file: Error: ENOENT: no such file or directory, open ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/constructor.ts’

WARNING in ./node_modules/ono/esm/extend-error.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/extend-error.ts’ file: Error: ENOENT: no such file or directory, open ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/extend-error.ts’

WARNING in ./node_modules/ono/esm/index.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/index.ts’ file: Error: ENOENT: no such file or directory, open ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/index.ts’

WARNING in ./node_modules/ono/esm/isomorphic.browser.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/isomorphic.browser.ts’ file: Error: ENOENT: no such file or directory, open ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/isomorphic.browser.ts’

WARNING in ./node_modules/ono/esm/normalize.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/normalize.ts’ file: Error: ENOENT: no such file or directory, open ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/normalize.ts’

WARNING in ./node_modules/ono/esm/singleton.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/singleton.ts’ file: Error: ENOENT: no such file or directory, open ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/singleton.ts’

WARNING in ./node_modules/ono/esm/stack.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/stack.ts’ file: Error: ENOENT: no such file or directory, open ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/stack.ts’

WARNING in ./node_modules/ono/esm/to-json.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/to-json.ts’ file: Error: ENOENT: no such file or directory, open ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/ono/src/to-json.ts’

ERROR in ./node_modules/@jsonforms/material-renderers/lib/additional/ListWithDetailMasterItem.js 11:13-41

Module not found: Error: Can’t resolve ‘@material-ui/core’ in ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/@jsonforms/material-renderers/lib/additional’

ERROR in ./node_modules/@jsonforms/material-renderers/lib/additional/ListWithDetailMasterItem.js 13:39-75

Module not found: Error: Can’t resolve ‘@material-ui/icons/Delete’ in ‘/Users/jayantwalvekar/Development/tests/my-jsonforms-app/node_modules/@jsonforms/material-renderers/lib/additional’

2

Hi @jaywal,

the last “stable” version is almost a year old and still uses React 16, Material v4 etc. Please update to the latest next version, i.e. npm i --save @jsonforms/core@next @jsonforms/react@next @jsonforms/material-renderers@next.

The 3.0 release is almost done and will be the next stable version.

3

Thank you for the prompt reply. I appreciate it. I like this module and really want to use it. However, there are still some issues.

I updated jsonforms version to 3.0.0-beta.1 in my existing app. As soon as I add JsonForms component in the UI, I get the following errors. If I just remove the component (but all dependencies are still installed), the error goes away. The errors are reported from react-scripts. I tried upgrading react-scripts from v4.0.1 to the latest (v5.0.1). However, that leads to many more errors. I am not sure if any other modules are creating conflict. I have included my dependencies down below. Please let me know if you see any incompatibility issues.

Errors:

Module parse failed: Unexpected token (110:134)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     configDispatch(Actions.setConfig(initState.config));
|   }, [initState.config]);
>   const [i18n, i18nDispatch] = useReducer(i18nReducer, undefined, () => i18nReducer(initState.i18n, Actions.updateI18n(initState.i18n?.locale, initState.i18n?.translate, initState.i18n?.translateError)));
|   useEffect(() => {
|     i18nDispatch(Actions.updateI18n(initState.i18n?.locale, initState.i18n?.translate, initState.i18n?.translateError));

My project dependencies:

  {
    "dependencies": {
    "@aws-amplify/ui-react": "^2.14.1",
    "@mui/x-data-grid": "^5.7.0",
    "aws-amplify": "^4.3.19",
    "aws-amplify-react": "^5.1.9",
    "dotenv": "^8.2.0",
    "hamburger-react": "^2.4.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.0.3",
    "uuid": "^8.3.2",
    "web-vitals": "^0.2.4",
    "@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/lab": "^5.0.0-alpha.78",
    "@mui/material": "^5.6.2"
  },

  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/d3": "^6.2.0",
    "@types/jest": "^26.0.15",
    "@types/material-ui": "^0.21.8",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "@types/react-helmet": "^6.1.0",
    "@types/react-router-dom": "^5.1.6",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/parser": "^4.31.2",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.2"
  }
}
4

Hi @jaywal,

yes you require the latest react-scripts as it includes the babel configuration necessary to understand the optional chaining and nullish-coalescing operators used in JSON Forms. react-scripts in version <5 additionally needs the babel plugins @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator to work.

If you’re struggling to get the setup right I would like to suggest starting from a clean CRA state and then add your dependencies one by one.

5

Thanks. I will try this over the next few days and let’s see how it goes.

6

Just FYI. I started with a project from scratch and kept adding dependencies and testing it. Hard to tell what fixed it. But I am glad that finally it worked. Thanks!

1 Like