[using-inferno] Update inferno to v7.3, fix missing React.createConte…

…xt function (#9038)

* Update inferno examples to v7.3

* Add polyfill for React.createContext

* Alias react and react-dom with inferno-compat

* Fix linter errors

* Add warning about hooks and suspense support

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')