Get rid of eval completely.

client/index.js

@@ -4,7 +4,6 @@ import mitt from 'mitt'
 import HeadManager from './head-manager'
 import { createRouter } from '../lib/router'
 import App from '../lib/app'
-import evalScript from '../lib/eval-script'
 import { loadGetInitialProps, getURL } from '../lib/utils'
 import ErrorDebugComponent from '../lib/error-debug'
 import PageLoader from '../lib/page-loader'
@@ -20,8 +19,6 @@ if (!window.Promise) {
 
 const {
   __NEXT_DATA__: {
-    component,
-    errorComponent,
     props,
     err,
     pathname,
@@ -32,8 +29,13 @@ const {
 } = window
 
 const pageLoader = window.NEXT_PAGE_LOADER = new PageLoader(buildId)
-const Component = evalScript(component).default
-const ErrorComponent = evalScript(errorComponent).default
+if (window.NEXT_LOADED_PAGES) {
+  window.NEXT_LOADED_PAGES.forEach((fn) => fn())
+  delete window.NEXT_LOADED_PAGES
+}
+
+const ErrorComponent = pageLoader.loadPageSync('/_error')
+const Component = pageLoader.loadPageSync(pathname) || ErrorComponent
 let lastAppProps
 
 export const router = createRouter(pathname, query, getURL(), {

lib/page-loader.js

@@ -18,6 +18,19 @@ export default class PageLoader {
     return route.replace(/index$/, '')
   }
 
+  loadPageSync (route) {
+    route = this.normalizeRoute(route)
+    const cachedPage = this.pageCache[route]
+
+    if (!cachedPage) {
+      return null
+    } else if (cachedPage.error) {
+      throw cachedPage.error
+    } else {
+      return cachedPage.page
+    }
+  }
+
   loadPage (route) {
     route = this.normalizeRoute(route)
 

server/build/plugins/pages-plugin.js

@@ -12,12 +12,21 @@ export default class PagesPlugin {
       pages.forEach((chunk) => {
         const page = compilation.assets[chunk.name]
         const pageName = matchRouteName.exec(chunk.name)[1]
-        const routeName = `/${pageName.replace(/[/\\]index$/, '')}`
+        const routeName = `/${pageName.replace(/[/\\]?index$/, '')}`
 
         const content = page.source()
         const newContent = `
-          var comp = ${content}
-          NEXT_PAGE_LOADER.registerPage('${routeName}', null, comp.default)
+          function loadPage () {
+            var comp = ${content}
+            window.NEXT_PAGE_LOADER.registerPage('${routeName}', null, comp.default)
+          }
+
+          if (window.NEXT_PAGE_LOADER) {
+            loadPage()
+          } else {
+            window.NEXT_LOADED_PAGES = window.NEXT_LOADED_PAGES || []
+            window.NEXT_LOADED_PAGES.push(loadPage)
+          }
         `
         // Replace the current asset
         // TODO: We need to move "client-bundles" back to "bundles" once we remove

server/document.js

@@ -95,6 +95,17 @@ export class NextScript extends Component {
     return this.getChunkScript('app.js', { async: true })
   }
 
+  getMainComponents () {
+    const { component, errorComponent } = this.context._documentProps
+
+    return (
+      <div>
+        <script dangerouslySetInnerHTML={{ __html: component }} />
+        <script dangerouslySetInnerHTML={{ __html: errorComponent }} />
+      </div>
+    )
+  }
+
   render () {
     const { staticMarkup, __NEXT_DATA__ } = this.context._documentProps
 
@@ -102,6 +113,7 @@ export class NextScript extends Component {
       {staticMarkup ? null : <script dangerouslySetInnerHTML={{
         __html: `__NEXT_DATA__ = ${htmlescape(__NEXT_DATA__)}; module={};`
       }} />}
+      {staticMarkup ? null : this.getMainComponents()}
       {staticMarkup ? null : this.getScripts()}
     </div>
   }

server/read-page.js

@@ -13,10 +13,8 @@ async function readPage (path) {
   }
 
   const source = await fs.readFile(f, 'utf8')
-  const { component } = JSON.parse(source)
-
-  cache[f] = component
-  return component
+  cache[f] = source
+  return source
 }
 
 export default readPage

server/render.js

@@ -57,8 +57,8 @@ async function doRender (req, res, pathname, query, {
     errorComponent
   ] = await Promise.all([
     loadGetInitialProps(Component, ctx),
-    readPage(join(dir, '.next', 'bundles', 'pages', page)),
-    readPage(join(dir, '.next', 'bundles', 'pages', '_error'))
+    readPage(join(dir, '.next', 'client-bundles', 'pages', page)),
+    readPage(join(dir, '.next', 'client-bundles', 'pages', '_error'))
   ])
 
   // the response might be finshed on the getinitialprops call
@@ -95,8 +95,6 @@ async function doRender (req, res, pathname, query, {
 
   const doc = createElement(Document, {
     __NEXT_DATA__: {
-      component,
-      errorComponent,
       props,
       pathname,
       query,
@@ -105,6 +103,8 @@ async function doRender (req, res, pathname, query, {
       err: (err && dev) ? errorToJSON(err) : null
     },
     dev,
+    component,
+    errorComponent,
     staticMarkup,
     ...docProps
   })