Оборачивание компонента PrimeUI в компонент React

Question

В качестве доказательства концепции я пытаюсь использовать PrimeUI в качестве основы для сборки компонентов React. Есть статья, объясняющая, как это сделать , Майкл Гутерл. Работает в 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'));

но я не могу заставить его работать изнутри приложения React. У меня ошибка 'piudropdown - это не функция' указывает на то, что primeUI не обнаружен или как-то не применен. Очевидно, у меня есть зависимости jquery, jquery-ui и primeui в package.json. Я также вижу некоторых сотрудников, связанных с Primeui, в моем js-файле из комплекта, поэтому он включен. Так есть ли у кого-нибудь идеи, что может быть не так или нет? Есть какие-нибудь предложения, как отладить такого рода проблемы?

Компонент 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"
  }
}

Answer 1

Хотя многие люди изо всех сил пытаются заставить jquery и jquery-ui работать вместе при использовании browserify, в моем случае это было не так. В нашей настройке у нас есть два js-файла vendor.js и app.js. В vendor.js включены jquery, slick и es5-shim, а все js-источники приложения скомпилированы в файл app.js. Проблема решена включением jquery-ui и primeui в файл vendor.js, поэтому они загружаются вместе с jquery.