react-jsonschema-form gives and error Module parse failed: Unexpected token (441:44)

Question

I am trying to get start with react-jsonschema-form. I have created brand new React project and tried this sample code. This code work as intended.

import logo from './logo.svg';
import './App.css';
import validator from "@rjsf/validator-ajv8";
import Form from "@rjsf/core";
// import Form from "@rjsf/mui"


function App() {
  const schema = {
    title: "Todo",
    type: "object",
    required: ["title"],
    properties: {
      title: {type: "string", title: "Title", default: "A new task"},
      done: {type: "boolean", title: "Done?", default: false}
    }
  };
  const log = (type) => console.log.bind(console, type);
  return (
    <div className="App">
      <Form schema={schema}
        validator={validator}
        onChange={log("changed")}
        onSubmit={log("submitted")}
        onError={log("errors")} />
    </div>
  );
}

export default App;

After that, I tried to implement this with my actual project. The code is same only difference is the react versions and the start script

Fresh react project

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",

"start": "react-scripts start",

The project where this code is not working

 "react": "^17.0.2",
 "react-dom": "^17.0.2",
 "react-scripts": "^4.0.3",



 "start": "react-app-rewired --openssl-legacy-provider start",

This is the error I am getting

./node_modules/@rjsf/validator-ajv8/dist/validator-ajv8.esm.js 441:44
Module parse failed: Unexpected token (441:44)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|   isValid(schema, formData, rootSchema) {
>     const rootSchemaId = rootSchema["$id"] ?? ROOT_SCHEMA_PREFIX;
| 
|     try {

with this strange error message, I don't have any clue where to start. How can I solve this problem ?

Answer 1

Have you checked your node version? Node 16+ only.