Uncaught ReferenceError: Main is not defined with webpack/react in Rails 4.2.4

Question

I'm facing the error below from Chrome Canary even the webpack works. By the way "Main" is my component created with 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

Do you know if I need to install or set up something else?

Below, you can find installation and configuration that I have in my OS X Yosemite 10.10.5

Webpack

When I run the "webpack" inside my test app, i got the message below. Seems to be that it looks good.

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 installation

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

During my babel installation, i got the message below.

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

That appeared when I installed

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

Another question. Do you know if this could be affecting the generation of the 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>;
  }
}

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

Thanks for your prompt answer.

Answer 1

You'll need to do few things to get the react-rails gem working with Webpack, you might be able to get it done by adding this line at the end of your Main.jsx

window.Main = Main;

However, I think the gem needs all files in a certain location if I remember correctly.

There is another gem that supports Webpack out of the box: react_on_rails

Answer 2

Do you have configured:

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

in your assets initilizer file? Besides I think you need the "export default" statement for the Main component.