Using-inferno: React.createContext is not a function

[sorleone]

Bug report

Describe the bug

Uncaught TypeError: React.createContext is not a function
    at Object../node_modules/next/dist/next-server/lib/router-context.js (router-context.js:11)

To Reproduce

Yarn

npx open-cli http://localhost:3000 & git clone https://github.com/sorleone/next-inferno.git && cd next-inferno && yarn install && yarn dev

NPM

npx open-cli http://localhost:3000 & git clone https://github.com/sorleone/next-inferno.git && cd next-inferno && npm install && npm run dev

open the dev console of the browser and you should see the error.

Expected behavior

I expect the app to work without errors.

System information

• Version of Next.js: latest

Additional context

https://github.com/zeit/next.js/tree/canary/examples/using-inferno

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

[rafaelalmeidatk]

inferno-compat does not support React.createContext, which is utilized internally by Next.js. The solution is to provide a polyfill for this function to fill the "gap".

[sorleone]

inferno-compat does not support React.createContext, which is utilized internally by Next.js. The solution is to provide a polyfill for this function to fill the "gap".

With the inferno-compat that you provided I was getting:

TypeError: react__WEBPACK_IMPORTED_MODULE_3___default.a.memo is not a function

by changing it to this:

const React = require('inferno-compat');
const createContext = require('create-react-context/lib/implementation');

for (const key in Object.keys(React)) {
  if (key !== 'default' && key !== '__esModule') {
    exports[key] = React[key];
  }
}

// bypass export of React.createContext
exports.createContext = createContext;
exports.default = React.default;

I am getting:

Uncaught TypeError: Super expression must either be null or a function, not undefined
    at _inherits (implementation.js:27)
    at implementation.js:74
    at Object.createReactContext [as createContext] (implementation.js:122)
    at Object../node_modules/next/dist/next-server/lib/router-context.js (router-context.js:11)

This is the config I am using:

module.exports = {
  webpack: function (config, { dev }) {
    config.resolve.alias = {
      ...config.resolve.alias,
      react: __dirname + '/src/inferno-compat.js',
      'react-dom': __dirname + '/src/inferno-compat.js',
      ...dev && { inferno: __dirname + '/node_modules/inferno/dist/index.dev.esm.js' }
    }
    return config
  }
}

Is this alias:

moduleAlias.addAlias('react-dom/server', 'inferno-server')

only useful if we are using a custom server?

[rafaelalmeidatk]

@sorleone can you try the new example? (the PR)

Is this alias: ...
only useful if we are using a custom server?

Nope, you have to use it for SSR. We are discussing if the custom server can be removed from the example.

[rafaelalmeidatk]

By the way, I cloned your project and applied the new files. Unfortunately it won't work because MUI uses hooks and it isn't supported by Inferno.

[dessalines]

So next.js can't support inferno anymore?

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.