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

Dan Prince · Accepted Answer · 2016-03-30 08:51:10Z

2

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")
);

answered Mar 30, 2016 at 8:51

Dan Prince

30.1k15 gold badges93 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Biggie Mac Over a year ago

You, sir, deserve a large pint of beer. Thanks a lot! Works well now.

Saket Kumar Over a year ago

In which file I have to add this ? const Form = JSONSchemaForm.default;

Dan Prince Over a year ago

@SaketKumar If you're using it from a CDN, then you need that in every file that you want to render a <Form /> component

Saket Kumar Over a year ago

I'm getting this error 'JSONSchemaForm' is not defined. when adding const form = JSONSchemaForm.default

Dan Prince Over a year ago

How are you adding JSONSchemaForm to your project?

Collectives™ on Stack Overflow

Using React component from js source maps

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related