[using-inferno] Next.js 4 requires React 16

[lyquocnam]

can not swich react 16 to inferno, i try to clone https://github.com/zeit/next.js/tree/canary/examples/using-inferno but not work

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Next.js 4 requires React 16

Current Behavior

Steps to Reproduce (for bugs)

1. next build
2. next start
3. Next.js 4 requires React 16

Context

Your Environment

Tech	Version
next	4
node	9
OS	osx
browser	chrome
etc

[JeromeFitz]

Looks like there are two things at the moment:

1. Inferno needs to be updated in the example project.

• When installing locally: All versions before 3.x are deprecated!

2. After doing that next has code in their server right now that is doing a specific check

// TODO: Remove this in Next.js 5
if (!(/^16\./.test(reactPkg.version))) {
  const message = `
Error: Next.js 4 requires React 16.
Install React 16 with:
  npm remove react react-dom
  npm install --save react@16 react-dom@16
`
  console.error(message)
  process.exit(1)
}

• This would cause inferno, preact, etc. to not be able to use the next server.

Until this is resolved, I believe you could bypass the next server by using a custom server (examples in the examples directory) and updating your dependencies accordingly to test out.

In attempting to test this, I realize now that this example runs a custom server.js much like the custom server examples, and the issue with requiring [email protected] is still present.

[vladejs]

Is this already solved?

[acao]

I had issues with preact as well, before this message appeared. Next 4/5 uses ReactDom.hydrate() and some other react 16 features not available yet in preact-compat or inferno-compat

see: preactjs/preact-compat#432

[acao]

ReactDom.hydrate() will be tricky - ReactDom got quite the overhaul in React 16.

just dug through the call stack and it's deeply enmeshed with fiber and react-reconciler. not sure how to re-create this in preact or inferno without just being cheap and calling the compatibility layer's render() instead.