Wrapping PrimeUI component into React component

Question

As a proof of concept I'm trying to use PrimeUI as a basis to build React components. There is an article explaining how to do it by Michael Guterl. It works in JSFiddle

var Component = React.createClass({
  componentDidMount: function() {
    var themes = new Array('afterdark', 'afternoon');
    $(ReactDOM.findDOMNode(this)).puidropdown({
      data: themes,
      editable: true
    });
  },
  render: function() {
    return <select / >
  }
});

ReactDOM.render( < Component / > , document.getElementById('container'));

but I'm unable to make it work from the inside React application. The error I have 'piudropdown - is not a function' indicates that primeUI is not picked up or somehow not applied. Obviously, I have jquery, jquery-ui and primeui dependencies in package.json. I also can see some primeui related staff in my bundled js file, therefore it is included. So does anyone have any ideas what could be wrong or missing? Is there any suggestions how to debug that sort of issues?

The component JS

var React = require('react');
require('jquery');
require('jquery-ui');
require('primeui');
var ReactDOM = require('react-dom');

var MyComponent = React.createClass({
    componentDidMount: function() {
        $(ReactDOM.findDOMNode(this)).puidropdown();
    },
    render: function() {
        return (
            <select/>
        )
    }
});

module.exports = MyComponent;

package.json

{
  "name": "xxx-react",
  "version": "0.0.1",
  "description": "React UI for XXX",
  "private": true,
  "scripts": {
    "start": "node start.js",
    "test": "karma start karma.conf.js"
  },
  "dependencies": {
    "body-parser": "1.14.0",
    "bower": "^1.4.1",
    "browserify": "13.0.0",
    "babelify": "7.2.0",
    "del": "1.1.0",
    "es5-shim": "4.0.5",
    "eslint-plugin-react": "4.3.0",
    "babel-eslint": "6.0.2",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "express": "4.10.6",
    "extend": "3.0.0",
    "gulp": "3.9.0",
    "gulp-concat": "^2.4.2",
    "gulp-connect": "2.3.1",
    "gulp-cssmin": "^0.1.6",
    "gulp-eslint": "^2.0.0",
    "gulp-sass": "2.1.0",
    "gulp-uglify": "^1.0.2",
    "gulp-util": "^3.0.1",
    "jasmine-core": "^2.3.4",
    "jquery": "2.1.3",
    "jquery-ui": "latest",
    "karma": "0.13.22",
    "karma-browserify": "5.0.3",
    "karma-chrome-launcher": "0.2.3",
    "karma-firefox-launcher": "0.1.7",
    "karma-cli": "0.1.2",
    "karma-jasmine": "0.3.6",
    "karma-junit-reporter": "0.4.2",
    "lodash": "4.11.0",
    "moment": "2.9.0",
    "react": "15.0.1",
    "react-dom": "15.0.1",
    "react-addons-test-utils": "15.0.1",
    "react-bootstrap": "0.28.5",
    "react-router-bootstrap": "0.22.0",
    "react-bootstrap-daterangepicker": "0.2.3",
    "react-router": "2.1.1",
    "reflux": "0.4.1",
    "vinyl-buffer": "1.0.0",
    "vinyl-source-stream": "^1.0.0",
    "watchify": "3.7.0",
    "primeui" : "latest"
  },
  "engines": {
    "node": "0.10.x"
  },
  "devDependencies": {
    "eslint": "2.7.0"
  }
}

No errors on build, but, as I said I've got the js exception 'puidropdown is not a function'. Inspecting the $(..) part gives proper jquery object. — Mikhail Chibel, May 11 '16 at 07:01

score 0 · Accepted Answer · answered May 11 '16 at 11:00

While many people struggle to make jquery and jquery-ui to work together when using browserify, in my case it wasn't actually the case. In our setup, we have two bundled js files vendor.js and app.js. The vendor.js includes jquery, slick and es5-shim while all the js sources of the application compiled into app.js file. The problem solved by including jquery-ui and primeui into vendor.js file, so they loaded together with jquery.

Wrapping PrimeUI component into React component

1 Answers1