Next.js: Using Inferno Example - TypeError

[justsee]

Using latest Inferno example renders and appears to work, but a TypeError is thrown in the console with each page request:

next.js?e673db6:37 TypeError: instance.componentWillMount is not a function
    at createClassComponentInstance (inferno.node.js?19343be:2039)
    at hydrateComponent (inferno.node.js?19343be:2218)
    at hydrate (inferno.node.js?19343be:2348)
    at hydrateComponent (inferno.node.js?19343be:2227)
    at hydrate (inferno.node.js?19343be:2348)
    at hydrateComponent (inferno.node.js?19343be:2227)
    at hydrate (inferno.node.js?19343be:2348)
    at hydrateRoot (inferno.node.js?19343be:2369)
    at Object.render (inferno.node.js?19343be:2441)
    at doRender (next.js?e673db6:119)

I could only see 1 closed issue in Inferno mentioning that error string, and it wasn't clear if it was relevant.

[timneutkens]

Upstream issue in inferno-compat. From what I could find it's because of this line https://github.com/infernojs/inferno/blob/5e4dc8499cca7617f8350569cccbfb90849baca3/src/server/renderToString.ts#L69

[timneutkens]

Found it. https://github.com/infernojs/inferno/blob/5e4dc8499cca7617f8350569cccbfb90849baca3/src/DOM/utils.ts#L39 Creating a PR now.

[rauchg]

Woah, excellent find @timneutkens

[timneutkens]

@rauchg Fix was merged. Not sure if we should close this issue. They release really fast, so I think we could close this.

[pungggi]

hi @timneutkens
journey is not over yet, using infoerno 1.1.2:
TypeError: instance.getChildContext is not a function
at createClassComponentInstance (inferno.node.js?28ef546:2088)
at hydrateComponent (inferno.node.js?28ef546:2266)
at hydrate (inferno.node.js?28ef546:2396)
at hydrateComponent (inferno.node.js?28ef546:2275)
at hydrate (inferno.node.js?28ef546:2396)
at hydrateComponent (inferno.node.js?28ef546:2275)
at hydrate (inferno.node.js?28ef546:2396)
at hydrateRoot (inferno.node.js?28ef546:2417)
at Object.render (inferno.node.js?28ef546:2489)
at doRender (next.js?0ca01b5:119)

[timneutkens]

@pungggi hmm, I'll have a look into this 👍

[pungggi]

when checking null on "childContex" it will throw a new errror

[timneutkens]

@pungggi you actually have to check isNullOrUndef(instance.getChildContext). I've already looked into this. Just have to test it a bit more.

[pungggi]

doh! you are right, thank you

[timneutkens]

@pungggi I'll create a PR for it. Already had written the code at the right place. Just hadn't had the time to test it thoroughly 😄

[jazzido]

I'm still seeing this issue on inferno^1.2.2.

[timneutkens]

@jazzido the issue turned out to be a bit bigger than I initially thought. @lukeed is going to take a look at it sometime.

[lukeed]

Sorry, I was traveling. Now back to my normal work schedule 👍

[abstracthat]

Are you able to take a look @lukeed? Would love to use Inferno with Next!

[lukeed]

Thanks @abstracthat, looking at it now. The ball is now in Next.js's court as it looks like the inferno-compat issue was fixed.

@timneutkens @rauchg @arunoda: While building from the next.js/examples folder, the dev and build tasks traverse upwards & pull React and ReactDOM from the root's node_modules directory. This allows Next.js to be built. However, once in the browser, the prefetch.js file throws in the browser because _it_ is expecting React to be present, when it is not. It does not get the memo that React and ReactDOM have been aliased.

If I reproduce/move the examples/using-inferno directory outside of the next.js root, the dev and build tasks fail to run _because internal Next.js files aren't respecting aliases_. Next.js still has a hard dependency on React. This is the same problem as above---this is just a more abrupt & concrete illustration of what's happening.

// next.config.js
module.exports = {
  webpack: function (config) {
    config.resolve.alias = {
      'react': 'inferno-compat',
      'react-dom': 'inferno-compat'
    }
    return config
  }
}