未捕获的 ReferenceError：Rails 4.2.4 中未使用 webpack/react 定义 Main答案

【问题标题】：Uncaught ReferenceError: Main is not defined with webpack/react in Rails 4.2.4未捕获的 ReferenceError：Rails 4.2.4 中未使用 webpack/react 定义 Main
【发布时间】：2016-04-01 17:34:10
【问题描述】：

即使 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

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

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

main.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"
  }
}

感谢您的及时答复。

【问题讨论】：

标签： javascript ruby-on-rails reactjs webpack

【解决方案1】：

你需要做一些事情来让 react-rails gem 与 Webpack 一起工作，你可以通过在 Main.jsx 的末尾添加这一行来完成它

window.Main = Main;

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

还有一个开箱即用支持 Webpack 的 gem：react_on_rails

【讨论】：

添加了arkerio发送的配置，应用正在运行。但是，我不得不从 main.jsx 中删除这个块代码： let documentReady = () => { ReactDOM.render(
, document.getElementById('react') ); }; $(文档就绪);你知道应用程序是否可以在没有上述 cove 的情况下继续运行？

【解决方案2】：

你有没有配置：

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

在您的资产初始化程序文件中？此外，我认为您需要 Main 组件的“export default”语句。

【讨论】：

感谢 aarkerio。我添加了这个配置并添加了这一行 window.Main = Main; Samer Buna 发送的。现在它正在工作。但是，我不得不删除这个块代码： let documentReady = () => { ReactDOM.render(
, document.getElementById('react') ); }; $(documentReady);