javascript - Uncaught ReferenceError : Main is not defined with webpack/react in Rails 4. 2.4

Question

即使 webpack 可以工作，我也遇到了来自 Chrome Canary 的以下错误。顺便说一句，“Main”是我用 React 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

你知道我是否需要安装或设置其他东西吗？

下面，您可以找到我在 OS X Yosemite 10.10.5 中的安装和配置

Webpack

当我在测试应用程序中运行“webpack”时，我收到以下消息。看起来好像不错。

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 安装

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

在我的 babel 安装过程中，我收到了以下消息。

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

安装时出现

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

另一个问题。 您知道这是否会影响 bundle 的生成吗？

.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>;
  }
}

ma​​in.jsx

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

{
  "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"
  }
}

感谢您的及时答复。

Answer 1

您需要做一些事情才能使react-rails gem与Webpack一起工作，您可以通过在Main.jsx末尾添加此行来完成它

window.Main = Main;

但是，如果我没记错的话，我认为 gem 需要某个位置的所有文件。

还有另一个 Gem 可以开箱即用地支持 Webpack: react_on_rails