Usage of React.Fragment in Container causes Inferno incompatability

[AndyOGo]

Bug report

First, really thanks a lot for this awesome piece of software 😃

Describe the bug

The Container's render method does not need to be wrapped by React.Fragment.

Just returning children is enough, if only one children is ever used.
Are multiple children ever considered to be used?

render () {
    const {children} = this.props
    return <>{children}</>
}

Since Inferno does not support Fragments yet, this also breaks the inferno example.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to using-inferno
2. make sure that all missing modules are installed - inferno-clone-vnode, inferno-create-class and inferno-create-element
3. run it.

{ Error: Inferno Error: createElement() name parameter cannot be undefined, null, false or true, It must be a string, class or function.
    at Object.createElement (/Users/andy/scale-unlimited/webapp_v2/node_modules/inferno-create-element/dist/index.cjs.js:53:15)
    at Container.render (/Users/andy/scale-unlimited/webapp_v2/node_modules/next/dist/lib/app.js:188:29)
    at renderVNodeToString (/Users/andy/scale-unlimited/webapp_v2/node_modules/inferno-server/dist/index.cjs.js:184:41)
    at renderVNodeToString (/Users/andy/scale-unlimited/webapp_v2/node_modules/inferno-server/dist/index.cjs.js:195:20)
    at renderToString (/Users/andy/scale-unlimited/webapp_v2/node_modules/inferno-server/dist/index.cjs.js:308:12)
    at renderPage (/Users/andy/scale-unlimited/webapp_v2/node_modules/next/dist/server/render.js:277:26)
    at Function.getInitialProps (/Users/andy/scale-unlimited/webapp_v2/node_modules/next/dist/server/document.js:67:25)
    at _callee$ (/Users/andy/scale-unlimited/webapp_v2/node_modules/next/dist/lib/utils.js:111:30)
    at tryCatch (/Users/andy/scale-unlimited/webapp_v2/node_modules/regenerator-runtime/runtime.js:62:40)
    at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/andy/scale-unlimited/webapp_v2/node_modules/regenerator-runtime/runtime.js:296:22)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/andy/scale-unlimited/webapp_v2/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/Users/andy/scale-unlimited/webapp_v2/node_modules/@babel/runtime/helpers/asyncToGenerator.js:12:30)
    at _next (/Users/andy/scale-unlimited/webapp_v2/node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:9)
    at /Users/andy/scale-unlimited/webapp_v2/node_modules/@babel/runtime/helpers/asyncToGenerator.js:34:7
    at Promise.F (/Users/andy/scale-unlimited/webapp_v2/node_modules/core-js/library/modules/_export.js:36:28)
    at /Users/andy/scale-unlimited/webapp_v2/node_modules/@babel/runtime/helpers/asyncToGenerator.js:7:12 sourceMapsApplied: true }

Expected behavior

Inferno should work and unnecessary Fragments should not be used.

System information

• OS: [e.g. macOS ]
• Browser latest chrome
• Version of Next.js: 6.0.3

Additional context

Related issue: #4031

[AndyOGo]

Intermediate quickfix is to override app.js, like:

pages/_app.js

import App, { Container, createUrl } from 'next/app'
import React from 'react'

class MyContainer extends Container {
  render () {
    const {children} = this.props

    // make sure to support all React-like libraries, whether they support Arrays, React.Fragment or not
    if (Array.isArray(children)) {
      console.log('Children is an array');

      // a root node is necessary
      return <div>{children.map((child, index) => {
        // only set key if it's null or undefined
        if (child.key == null) {
          child.key = index
        }

        console.log(`${child.key} -> ${index}`)

        return child
      })}</div>
    }

    return children
  }
}

export default class MyApp extends App {
  render () {
    const {router, Component, pageProps} = this.props
    const url = createUrl(router)
    return <MyContainer>
      <Component {...pageProps} url={url} />
    </MyContainer>
  }
}

[AndyOGo]

I did bit some more research and I find out that babel-plugin-transform-react-jsx has a pragmaFrag option:
https://new.babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html#pragmafrag

Which may could be set to a <div>, to make Inferno and Preact work, like:

"plugins": [
  ["transform-react-jsx", {
    "pragma": "h",
    "pragmaFrag": "\"div\""
  }]
]

Related issue of Preact:
preactjs/preact#946

[HaNdTriX]

This issue has been resolved in #4766