React 19 support

[dumbmatter]

It seems that the current version of ink does not work with React 19. For example with some minimal code like this:

import React from 'react';
import {render, Text} from 'ink';

render(React.createElement(Text, null, "Hello world"));

I get this output with react 18.3.1:

$ node index.js
Hello world

And this with react 19.0.0:

$ node index.js
/home/user/ink-react-19/node_modules/.pnpm/[email protected][email protected]/node_modules/react-reconciler/cjs/react-reconciler.development.js:491
var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
                                             ^

TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')
    at $$$reconciler (/home/user/ink-react-19/node_modules/.pnpm/[email protected][email protected]/node_modules/react-reconciler/cjs/react-reconciler.development.js:491:46)
    at file:///home/user/ink-react-19/node_modules/.pnpm/[email protected][email protected]/node_modules/ink/build/reconciler.js:61:16

Node.js v22.11.0

[marviobezerra]

Same here

[MattyBalaam]

Is someone using React internals? Hope they don't get fired.

[EvgeniyWis]

So the only thing left is to either downgrade React to version 18 or just wait?

[jsadoski-rockhall]

@KrisWis There's a temporary fork with a viable React 19 upgrade: https://github.com/QuentinFontenay/ink/tree/react-v19.0.0

[EvgeniyWis]

@KrisWis There's a temporary fork with a viable React 19 upgrade: https://github.com/QuentinFontenay/ink/tree/react-v19.0.0

But, the thing is, I don't use ink directly, I use Loki (for UI tests in conjunction with Storybook), and it in turn uses react-reconciler, which already uses ink. It's like this /:

[jakubmazanec]

Based on the forked and updated Ink linked above (thank you @QuentinFontenay), I created this patch: https://gist.github.com/jakubmazanec/3b2b0c86bb7f34fe9ae0937d608b590b

Use package patch-package to apply it, and also add following overrides to your package.json:

"overrides": {
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "react-reconciler": "^0.31.0"
}

Overriding react-reconciler is needed, overriding React is maybe needed only in my specific case. Anyway, my Ink app seems to be working now (edit: it's working, but Box component seems to render child elements incorrectly).

@sindresorhus I know you're probably very busy, but as a new maintainer (AFAIK), could you please give us some timeline when Ink will be fixed? Thank you.

[sindresorhus]

A pull request with the minimum amount of changes to add React 19 support is welcome.