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?

score 2 · Accepted Answer · answered Mar 13 '17 at 12:37

2

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

answered Mar 13 '17 at 12:37

Christoph Hegemann

1,434
8
13

Thanks. I was using `snaplet-purescript` and so far it has taken care of `pulp`-related things for me. Now I'm trying to get `bower` to install `react-dom` and it's asking for some GitHub credentials. Oh well... at least I seem to be making progress. – StantonT Mar 13 '17 at 13:05
I looked snaplet-purescript up and it seems to have some configuration for bundling, but I'm not sure if it can handle bundling npm packages on top of the PS files. Maybe best to open an issue on the repo. Good luck! – Christoph Hegemann Mar 13 '17 at 13:22

score 0 · Answer 2 · answered Mar 19 '18 at 23:02

In addition to Christophs answer (but can't comment since comments don't allow code blocks):

Using Thermite 4.1.1 this worked for me:

add a package.json file with:

{
  "dependencies": {
    "react": "^0.14",
    "react-dom": "^0.14"
  }
}

run npm install

from then on pulp browserify --optimise gets the whole shebang packaged.

This is really badly documented and I opened an issue about that on purescript-react.

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

2 Answers2