Yakalanmamış ReferenceError: Ana, raylar için web paketi/reaktifi ile tanımlanmamıştır. 4.2.4

Question

Web kutusunun çalışması bile Chrome Canary'den aşağıdaki hatayla karşılaşıyorum. Bu arada "Ana" Benim bileşeni ile oluşturulan Tepki 0.14.6

VM601:1 Uncaught ReferenceError: Main is not defined 
(anonymous function) @ VM601:1 
mountComponents  @ react_ujs_mount.self-69e74f4….js?body=1:56 
(anonymous function) @ react_ujs_native.self-69da92a….js?body=1:9 
fire     @ jquery.self-660adc5….js?body=1:3233 
fireWith    @ jquery.self-660adc5….js?body=1:3363 
ready    @ jquery.self-660adc5….js?body=1:3583 
completed   @ jquery.self-660adc5….js?body=1:3618 

Ben yüklemek veya başka bir şey kurmak gerekirse biliyor musunuz? Aşağıda

, sen benim OS X Yosemite 10.10.5

WebPack ben benim test uygulaması açıkken "WebPack" çalıştırdığınızda

i got mesajı var kurulum ve konfigürasyon bulabilirsiniz altında. İyi gözüküyor gibi görünüyor. Benim babel Yükleme sırasında

ash: f9147c799d98d76fbd61 
Version: webpack 1.12.14 
Time: 624ms 
    Asset  Size Chunks    Chunk Names 
    bundle.js 5.76 kB  0 [emitted] main 
+ 2 hidden modules 

Babel kurulum

babel-core@6.7.4 
    babel-code-frame@6.7.4 
    babel-generator@6.7.2 
    babel-helpers@6.6.0 
    babel-messages@6.7.2 
    babel-register@6.7.2 
    babel-runtime@5.8.38 
    babel-template@6.7.0 
    babel-traverse@6.7.4 
    babel-types@6.7.2 
babel-loader@6.2.4 
babel-preset-es2015@6.6.0 extraneous 
babel-preset-react@6.5.0 extraneous 
babel-preset-stage-0@6.5.0 extraneous 

i aşağıda mesajı aldı. Ben

webpack 
babel-loader 
babel-preset-es2015 
babel-preset-react 
babel-preset-stage-0 
babel loader through 

başka soru

yüklerken açılan

npm ERR! peer dep missing: webpack@1 || ^2.1.0-beta, required by babel 
loader@6.2.4 

. Bunun paketin oluşumunu etkileyip etkilemeyeceğini biliyor musunuz?

.babelrc

{ 
    "presets": ["es2015", "stage-0", "react"] 
} 

webpack.config.js

module.exports = { 
    entry: "./app/assets/frontend/main.jsx", 
    output: { 
     path: __dirname + "/app/assets/javascripts", 
     filename: "bundle.js" 
    }, 
    resolve: { 
    extensions: ['','.js','.jsx'] 
    }, 
    module: { 
     loaders: [ 
       { test: /\.jsx$/, loader: "babel-loader" } 
     ] 
    } 
}; 

greet.jsx

export default class Greet extends React.Component { 
    render() { 
    return <h2>Hello World</h2>; 
    } 
} 

import Greet from './greet'; 

class Main extends React.Component { 
    render() { 
    return (
     <Greet /> 
    ); 
    } 
} 

let documentReady =() => { 
    ReactDOM.render(
    <Main />, 
    document.getElementById('react') 
); 
}; 

$(documentReady); 

index.html.erb

<div id="react"/> 
<%= react_component("Main") %> 

package.json Hemen cevap için

{ 
    "name": "twitter-clone", 
    "version": "1.0.0", 
    "description": "Twitter clone, written in React, Flux, and Rails", 
    "main": "index.js", 
    "directories": { 
    "test": "test" 
    }, 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Jose Alanya", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.7.4", 
    "babel-loader": "^6.2.4" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.7.4", 
    "babel-loader": "^6.2.4" 
    } 
} 

teşekkürler main.jsx.

Answer 1

yapılandırdığın yapın: varlıklarda

Rails.application.config.assets.precompile += %w(bundle.js) 

dosyanın initilizer? Ayrıca, ana bileşen için "ihracat varsayılanı" ifadesine ihtiyacınız olduğunu düşünüyorum.

Answer 2

Web-ray ile çalışan tepki raylarını almak için birkaç şey yapmanız gerekecek, bunu Ana hattınızın sonuna ekleyerek bu işlemi gerçekleştirebilirsiniz.jsx

window.Main = Main; 

Ancak, doğru bir şekilde hatırladığım halde, gemin belirli bir konumdaki tüm dosyalara ihtiyacı olduğunu düşünüyorum. react_on_rails