APIをRailsで、フロントエンドをReactで実装しています。
基本的にすべてのjsをnpmに寄せていますが、viewからreact用のヘルパーを利用したいため、
react-railsのgemは利用し、browserify-railsを利用しています。
ただし、react本体はbrowserifyでrequireしています。
package.json
{
"name": "hoge",
"version": "0.0.0",
"description": "== README",
"main": "index.js",
"directories": {
"test": "test"
},
"dependencies": {
"bootstrap": "^3.3.7",
"browserify": "~13.0.1",
"browserify-incremental": "~3.1.1",
"font-awesome": "^4.6.3",
"i18n-js": "^1.0.0",
"jquery": "2.2.4",
"jquery-ujs": "^1.2.2",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-summernote": "^1.0.3",
"reactify": "~1.1.1",
"switchery": "0.0.2"
},
"devDependencies": {
"j-toker": "0.0.10-beta3",
"lodash": "~4.13.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git@bitbucket.org~"
},
"author": "",
"license": "BSD-2-Clause"
}
Gemfile
source 'https://rubygems.org'
gem 'rails', '4.2.1'
...
gem 'browserify-rails'
gem 'react-rails', '~> 1.0'
...
application.js
//= require jquery/dist/jquery
//= require jquery-ujs
//= require bootstrap/dist/js/bootstrap
//= require i18n-js/i18n
//= require lodash/lodash
//= require switchery
//= require_tree .
components.js
//= require_self
//= require react_ujs
//= require_tree ./components
// NOTE React 本体は browserifyでrequireする
window.React = require('react');
window.ReactDOM = require('react-dom');
new.html.slim
#app
= react_component('HogeHoge', authenticity_token: form_authenticity_token)
new.jsx
var HogeHoge = React.createClass({
...
render: function() {
<form className='pattern1' encType='multipart/form-data'>
</form>
);
})
ここまでは正常に動いていますが、
以下の通り、new.jsxの冒頭で、browserifyで外部ライブラリの何かしらをrequireをすると(僕の場合はreact-summernoteをrequire)エラーが発生します。
https://www.npmjs.com/package/react-summernote
new.jsx
var ReactSummernote = require('react-summernote');
var HogeHoge = React.createClass({
render: function() {
...
<form className='pattern1' encType='multipart/form-data'>
<ReactSummernote
value="Default value"
options={{
lang: 'ja-JP',
height: 350,
dialogsInBody: true,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['fontname', ['fontname']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview']]
]
}}
onChange={this.handleInputChange}
/>
</form>
);
})
Uncaught ReferenceError: HogeHoge is not defined
ページをロードし終わると、このエラーが発生し、描画はされません。
そもそもjs周辺の知識が足りないこと、あるいはreactを理解できていないこと、
が問題解決できない理由な気はしていますが、
何かお気づきになる点がありましたら、ご指摘頂けますと幸いです。
何卒よろしくお願い致します。