[using-inferno] Update inferno to v7.3, fix missing React.createContext function

examples/using-inferno/README.md

@@ -1,4 +1,6 @@
-# Hello World example
+# Inferno example
+
+> **Important**: Inferno does not support hooks nor Suspense. It may work on development where React is utilized instead of Inferno, but it will break as soon as you try to build it or start it out of development.
 
 ## How to use
 
@@ -39,8 +41,9 @@ now
 
 ## The idea behind the example
 
-This example uses [Inferno](https://github.com/infernojs/inferno), an insanely fast, 9kb React-like library for building high-performance user interfaces on both the client and server. Here we've customized Next.js to use Inferno instead of React.
+This example uses [Inferno](https://github.com/infernojs/inferno), an insanely fast, 9kb React-like library for building high-performance user interfaces on both the client and server. Here we've customized Next.js to use Inferno instead of React in the production build.
 
 Here's how we did it:
 
 - Use `next.config.js` to customize our webpack config to support [inferno-compat](https://www.npmjs.com/package/inferno-compat)
+- Create `lib/inferno-compat.js` to polyfill the `React.createContext` API (required by Next.js) that is not available by `inferno-compat`

examples/using-inferno/lib/inferno-compat.js

@@ -0,0 +1,11 @@
+const React = require('inferno-compat')
+const createContext = require('create-react-context/lib/implementation')
+
+Object.keys(React).forEach(key => {
+  if (key === 'default' || key === '__esModule') return
+  exports[key] = React[key]
+})
+
+// bypass export of React.createContext
+exports.createContext = createContext
+exports.default = React.default

examples/using-inferno/next.config.js

@@ -1,3 +1,5 @@
+const path = require('path')
+
 module.exports = {
   webpack: function (config, { dev }) {
     // For the development version, we'll use React.
@@ -8,9 +10,11 @@ module.exports = {
 
     config.resolve.alias = {
       ...config.resolve.alias,
-      react: 'inferno-compat',
-      'react-dom': 'inferno-compat'
+      react: path.resolve('./lib/inferno-compat.js'),
+      'react-dom': path.resolve('./lib/inferno-compat.js'),
+      'react-dom/server': 'inferno-server'
     }
+
     return config
   }
 }

examples/using-inferno/package.json

@@ -7,9 +7,10 @@
     "start": "NODE_ENV=production node server.js"
   },
   "dependencies": {
-    "inferno": "^1.4.0",
-    "inferno-compat": "^1.4.0",
-    "inferno-server": "^1.4.0",
+    "create-react-context": "0.3.0",
+    "inferno": "7.3.2",
+    "inferno-compat": "7.3.2",
+    "inferno-server": "7.3.2",
     "module-alias": "^2.0.0",
     "next": "latest",
     "react": "^16.7.0",

examples/using-inferno/server.js

@@ -1,13 +1,14 @@
 const port = parseInt(process.env.PORT, 10) || 3000
 const dev = process.env.NODE_ENV !== 'production'
 const moduleAlias = require('module-alias')
+const path = require('path')
 
 // For the development version, we'll use React.
 // Because, it support react hot loading and so on.
 if (!dev) {
-  moduleAlias.addAlias('react', 'inferno-compat')
+  moduleAlias.addAlias('react', path.resolve('./lib/inferno-compat.js'))
   moduleAlias.addAlias('react-dom/server', 'inferno-server')
-  moduleAlias.addAlias('react-dom', 'inferno-compat')
+  moduleAlias.addAlias('react-dom', path.resolve('./lib/inferno-compat.js'))
 }
 
 const { createServer } = require('http')