I believe I followed all the steps correctly, but I’m having trouble getting the application to start. I’m getting errors like the following:
Compiled with problems:X
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:\tdata\my-jsonforms-app\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:\tdata\my-jsonforms-app\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 }
As part of my troubleshooting, I:
recreated a new CRA app from scratch (without material UI or any of the JSON form libraries) with exactly the same approach as before. This out-of-the-box application ran fine
Modified my problem app so that it does not import JsonForms, and doesn’t make use of it in the JSX. I also removed all the material UI. I re-ran this app, and it runs fine as well.
Simply imported person, and referenced the parts:
import React, { useState } from "react";
// import logo from "./logo.svg";
import { person } from "@jsonforms/examples";
// import {
// materialRenderers,
// materialCells,
// } from "@jsonforms/material-renderers";
// import { JsonForms } from "@jsonforms/react";
import "./App.css";
const schema = person.schema;
const uischema = person.uischema;
const initialData = person.data;
function App() {
// const [formData, setData] = useState(initialData);
return (
<div className="App">
Hello?
{/* <JsonForms
schema={schema}
uischema={uischema}
data={formData}
renderers={materialRenderers}
cells={materialCells}
onChange={({ data }) => setData(data)}
/> */}
</div>
);
}
export default App;
Doing the above cause the errors noted earlier to re-appear. Any suggestions?
The problem appears to be that with webpack 5, a lot of node.js modules are no longer automatically polyfilled. There are ways to change it in the webpack.config.js, but CRA doesn’t allow direct access to webpack.config.js without ejecting. There are options like craco to get around this, but I went with the simpler approach of downgrading react-scripts to 4.0.3, as per this thread:
While this works, it’d be very good if jsonforms was updated so that it doesn’t rely on code that only exists in node. I assume that any form code would every only be running on the browser rather than server, and really this server based code should be removed.
Yes one of the downsides of the resolving library we included for JSON Forms up until 2.5.2 are its Node dependencies which must be polyfilled. This was done automatically by Webpack 4 but was removed with Webpack 5, making JSON Forms harder to use.
We got rid of the resolving library completely with JSON Forms 3.0. So it’s much easier to use with Webpack 5 now.
Do note the use of 3.0.0-beta.0 (instead of 3.0.0-beta.1) for @jsonforms/core. Attempting to use later one causes problems in install
This is definitely not intended. We always publish all JSON Forms packages at the same time in the same version and they should always be consumed with the same version, as otherwise they might break horribly for you.
I just checked, the peer dependency is set too strictly for the beta.1 release by accident. If you can please just ignore the warning and consume 3.0.0-beta.1. It probably also works with beta.0 this time, but we can’t guarantee this in the future.
We’ll fix the version range for the next prerelease . Thanks for letting us know!
Failed to compile.
./node_modules/@jsonforms/react/lib/jsonforms-react.esm.js 111:134
Module parse failed: Unexpected token (111: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));
You need to use either create-react-app v5 or later, or add appropriate babel plugins to create-react-app v4, i.e. @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator.
. Thanks for letting us know!