Handle pages with no default export and show an error. (vercel#1484)

arunoda · web-flow · commit 97c472c0c841 · 2017-03-23T09:40:22.000+05:30
That error is meaningful and easy to find the issue.
diff --git a/lib/app.js b/lib/app.js
@@ -19,6 +19,11 @@ export default class App extends Component {
   render () {
     const { Component, props, hash, err, router } = this.props
     const url = createUrl(router)
+    // If there no component exported we can't proceed.
+    // We'll tackle that here.
+    if (typeof Component !== 'function') {
+      throw new Error(`The default export is not a React Component in page: "${url.pathname}"`)
+    }
     const containerProps = { Component, props, hash, router, url }
 
     return <div>
diff --git a/test/integration/basic/pages/no-default-export.js b/test/integration/basic/pages/no-default-export.js
@@ -0,0 +1 @@
+export default {}
diff --git a/test/integration/basic/test/rendering.js b/test/integration/basic/test/rendering.js
@@ -58,6 +58,12 @@ export default function ({ app }, suiteName, render) {
       expect(html.includes('Zeit')).toBeTruthy()
     })
 
+    test('default export is not a React Component', async () => {
+      const $ = await get$('/no-default-export')
+      const pre = $('pre')
+      expect(pre.text()).toMatch(/The default export is not a React Component/)
+    })
+
     test('error', async () => {
       const $ = await get$('/error')
       expect($('pre').text()).toMatch(/This is an expected error/)
