include module-related code when generating for webpack

lib/generators/react/component_generator.rb

@@ -100,7 +100,7 @@ def create_component_file
         end
 
         # Prefer webpacker to sprockets:
-        if defined?(Webpacker)
+        if webpacker?
           new_file_name = file_name.camelize
           extension = options[:coffee] ? "coffee" : "js"
           target_dir = Webpacker::Configuration.source_path
@@ -119,6 +119,30 @@ def create_component_file
 
       private
 
+      def component_name
+        file_name.camelize
+      end
+
+      def file_header
+        if webpacker?
+          %|var React = require("react")\n|
+        else
+          ""
+        end
+      end
+
+      def file_footer
+        if webpacker?
+          %|module.exports = #{component_name}|
+        else
+          ""
+        end
+      end
+
+      def webpacker?
+        defined?(Webpacker)
+      end
+
        def parse_attributes!
          self.attributes = (attributes || []).map do |attr|
            name, type, options = "", "", ""

lib/generators/templates/component.es6.jsx

@@ -1,4 +1,4 @@
-class <%= file_name.camelize %> extends React.Component {
+<%= file_header %>class <%= component_name %> extends React.Component {
   render () {
 <% if attributes.size > 0 -%>
     return (
@@ -21,3 +21,4 @@ class <%= file_name.camelize %> extends React.Component {
 <% end -%>
 };
 <% end -%>
+<%= file_footer %>

lib/generators/templates/component.js.jsx

@@ -1,4 +1,4 @@
-var <%= file_name.camelize %> = React.createClass({
+<%= file_header %>var <%= component_name %> = React.createClass({
 <% if attributes.size > 0 -%>
   propTypes: {
 <% attributes.each_with_index do |attribute, idx| -%>
@@ -21,3 +21,4 @@ var <%= file_name.camelize %> = React.createClass({
 <% end -%>
   }
 });
+<%= file_footer %>

lib/generators/templates/component.js.jsx.coffee

@@ -1,4 +1,4 @@
-class @<%= file_name.camelize %> extends React.Component
+class @<%= component_name %> extends React.Component
 <% if attributes.size > 0 -%>
   @propTypes =
 <% attributes.each do |attribute| -%>
@@ -15,4 +15,4 @@ class @<%= file_name.camelize %> extends React.Component
     </div>`
 <% else -%>
     `<div />`
-<% end -%>
+<% end -%>

test/dummy/package.json

@@ -21,7 +21,7 @@
     "rails-erb-loader": "^4.0.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
-    "react_ujs": "^2.0.2",
+    "react_ujs": "^2.1.0",
     "sass-loader": "^6.0.3",
     "style-loader": "^0.16.1",
     "webpack": "^2.3.3",

test/dummy/yarn.lock

@@ -3450,9 +3450,9 @@ react@^15.4.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.0"
 
-react_ujs@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/react_ujs/-/react_ujs-2.0.2.tgz#0020f38fa2e47a04c03faa080325324bfa6d1f0b"
+react_ujs@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react_ujs/-/react_ujs-2.1.0.tgz#bef224350b09b82b01fc678718a257192d5bbf1f"
 
 read-cache@^1.0.0:
   version "1.0.0"

test/generators/component_generator_test.rb

@@ -19,7 +19,12 @@ def filename
   test "creates the component file" do
     run_generator %w(GeneratedComponent)
 
-    assert_file filename
+    assert_file filename do |contents|
+      if WebpackerHelpers.available?
+        assert_match /^var React = require\("react"\)/, contents
+        assert_match /module\.exports = GeneratedComponent\n$/m, contents
+      end
+    end
   end
 
   test "creates the component file with a node argument" do