Question

我使用react-rails作为我的rails 4 app。使用反应模块的唯一方法是this method。一切都很好，没问题。我一直在使用chrome版本47.0.2526.106（64位）。

使用任何其他浏览器，我得到React is not defined。

奇怪的是，如果//= require react中的application.js删除了该消息，但我肯定会要求React两次，并且在components.js React = require('react');中需要做出反应时会出现其他问题{ {1}}

简而言之，我正在使用react-rails gem和npm react。我只需要使用npm版本的react和react-rails的格式＆＃39; <%= react_component() %>

解决为什么chrome工作没有任何问题而不是其他问题的解决方案（firefox，safari）。我没有尝试过探险家。

的application.js：

//= require jquery
//= require jquery_ujs
//= require foundation
//= require moment
//= require ckeditor/init
//= require components
//= require react-rails-hot-loader
//= require_tree .

...

components.js：

//= require_self
//= require react_ujs

React = require('react');
ReactDOM = require('react-dom');
LinkedStateMixin = require('react-addons-linked-state-mixin');

...

错误堆栈：

//error stack:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({"/Users/sylar/Sites/rails/simple-app/app/assets/javascripts/components/_stream_0.js":[function(require,module,exports){
var Dashboard = React.createClass({ 
  displayName: "Dashboard",

  render: function () {
    return React.createElement(
      "div",
      null,
      "Hi"
    );
  }

});
module.exports = Dashboard;
},{}]},{},["/Users/sylar/Sites/rails/simple-app/app/assets/javascripts/components/_stream_0.js"]);

的package.json：

{
  "name": "simple-app",
  "dependencies": {
    "browserify": "~> 10.2.4",
    "browserify-incremental": "^3.0.1",
    "react": "^0.14.3",
    "react-addons-linked-state-mixin": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-dropzone": "^3.3.0",
    "react-select": "^1.0.0-beta7",
    "reactify": "^1.1.1"
  },
  "engines": {
    "node": ">= 0.10"
  }
}

的Gemfile：

source 'https://rubygems.org'
ruby '2.2.3'
gem 'rails', '4.2.4'
gem 'pg'
group :production do
  gem 'rails_12factor'
  gem 'puma'
end

gem 'sass-rails', '~> 5.0'
gem 'country_select'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'jbuilder', '~> 2.0'
gem 'foundation-rails'
gem 'momentjs-rails', '2.10.3'
gem 'react-rails', '~> 1.4.2'
gem "browserify-rails"
gem 'react-rails-hot-loader'
gem 'sidekiq', '4.0.1'
gem 'sinatra', require: false
gem 'slim'
gem 'ckeditor', '4.1.2'
gem 'devise', '3.5.2'
gem 'paperclip', '4.3.1'
gem 'aws-sdk', '< 2.0'

gem 'kaminari', '0.16.3'

gem 'awesome_print', :require => 'ap'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'stripe', '1.27.2'
# Use Figaro to hide secret keys
gem 'figaro', '1.1.1'
gem 'friendly_id', '5.1.0'

group :development, :test do
  gem 'byebug'
  gem 'web-console', '~> 2.0'
  gem 'spring'
  gem 'better_errors'
end

除了Chrome浏览器

0 个答案: