diff --git a/src/global-api.js b/src/global-api.js
index a5999a0c02a..94a9b1390bf 100644
--- a/src/global-api.js
+++ b/src/global-api.js
@@ -105,6 +105,10 @@ export default function (Vue) {
       }
     }
     var Sub = createClass(name || 'VueComponent')
+    // cache constructor
+    if (isFirstExtend) {
+      extendOptions._Ctor = Sub
+    }
     Sub.prototype = Object.create(Super.prototype)
     Sub.prototype.constructor = Sub
     Sub.cid = cid++
@@ -124,10 +128,6 @@ export default function (Vue) {
     if (name) {
       Sub.options.components[name] = Sub
     }
-    // cache constructor
-    if (isFirstExtend) {
-      extendOptions._Ctor = Sub
-    }
     return Sub
   }
 
diff --git a/test/unit/specs/global_api_spec.js b/test/unit/specs/global_api_spec.js
index 6a0aeb65cda..918f826a4c9 100644
--- a/test/unit/specs/global_api_spec.js
+++ b/test/unit/specs/global_api_spec.js
@@ -121,5 +121,32 @@ describe('Global API', function () {
       expect(typeof component).toBe('function')
       expect(component.options.name).toBe('Component1')
     })
+
+    // GitHub issue #4187
+    it('convert recursive components correctly', function () {
+      var components = {}
+      components['CompB'] = {
+        props: ['level'],
+        template: '<div>B{{level}}<div v-if="level<11111"><comp-a :level="level+1"></comp-a></div></div>',
+        components: components
+      }
+      components['CompA'] = {
+        props: ['level'],
+        template: '<div>A{{level}}<div v-if="level<11111"><comp-b :level="level+1"></comp-b></div></div>',
+        components: components
+      }
+      components['App'] = {
+        template: '<div>Start<comp-a level="1"></comp-a></div>',
+        components: components
+      }
+
+      var app = new Vue({
+        components: components
+      })
+
+      expect(app.$options.components.App.name).toBe('VueComponent')
+      expect(typeof app.$options.components.CompA).toBe('function')
+      expect(typeof app.$options.components.CompB).toBe('function')
+    })
   })
 })