Integrating React components with Pux - where does require() come from?

Question

The Pux documentation tells me to use require() in the browser. Where does that function come from and how do I use it?

Background:

I'm trying to integrate the Quill editor with my web application that uses purescript-pux. Following the Pux documentation I created a file MyEditor.js like this:

// module MyEditor
var React = require("react");
var Pux = require("purescript-pux");
var MyEditor = React.createClass({
    displayName: "MyEditor",
    onTextChange: function onTextChange(value) {
        this.setState({ text: value });
    },
    render: function render() {
        return React.createElement(ReactQuill, { value: this.state.text,
                                                 onChange: this.onTextChange });
    }
});
exports.fromReact = Pux.fromReact(MyEditor);

and a file MyEditor.purs as follows:

module MyEditor where
import Pux.Html (Html, Attribute)
foreign import fromReact :: forall a. Array (Attribute a) -> Array (Html a) -> Html a

I then use MyEditor.fromReact [value p.description] in my Html Action and the code compiles, but the browser complains about ReferenceError: require is not defined.

I'm not very familiar with the javascript ecosystem. I'm aware that several libraries providing a require() function exist, but which one do I use with Pux and how?

Answer 1

require is the NodeJS way of importing modules, it's not supported in the browser so you'll need to run your project through a bundler like browserify or webpack to produce a bundle that the browser can understand.

If you are using the pulp build tool it's as simple as running

pulp browserify --to app.js

and then loading app.js in your html through a script tag.

pulp browserify documentation: https://github.com/bodil/pulp#commonjs-aware-builds