Using React component from js source maps

Question

Long story short, I'm trying to learn React to use in one of my projects. I'm now trying to use a react component ( https://github.com/mozilla-services/react-jsonschema-form ) but I don't understand how to use it with the CDN version. So there is a js file and also a source map

The component looks pretty straight forward to use:

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 formData = {
  title: "First task",
  done: true
};

const log = (type) => console.log.bind(console, type);

render((
  <Form schema={schema}
        formData={formData}
        onChange={log("changed")}
        onSubmit={log("submitted")}
        onError={log("errors")} />
), document.getElementById("app"));

If I correctly understood, using the CDN approach, I should be able to just include the js(and also react/react-dom) and it should work, right? Only I get an error:

embedded:18 Uncaught ReferenceError: Form is not defined

When I look in the js file, I don't see the Form component specified, while I do see it in the map:

class Form extends Component

So how exactly should this be used? As I feel I'm missing something here

Answer 1

Form is only available in the examples after importing and aliasing the JSONSchemaForm module which is why it doesn't show up in the minified version.

import Form from "react-jsonschema-form";

However, the compiled ES module is added to the global namespace as JSONSchemaForm in the CDN version and you can manually access its default export property.

const Form = JSONSchemaForm.default;

Then use it as a React component.

ReactDOM.render((
  <Form schema={schema}
    formData={formData}
    onChange={log("changed")}
    onSubmit={log("submitted")}
    onError={log("errors")} />
  ),
  document.getElementById("app")
);