React component bundle for consuming by browser and node (react hooks issue) - node.js

Question

I have seriously headache because of this issue.
Source code - https://github.com/marekkobida/stackoverflow
UPDATE - without React hooks everything works...
Issue
I am trying to build a single bundle (react component) for browser and node via webpack bundler for SSR purposes. Node should swallow that bundle as described here:
const React = require("react");
const ReactDOMServer = require("react-dom/server");
const Test = require("./public/index.js").default; // ✅ React Component (works)
ReactDOMServer.renderToString(React.createElement(Test)); // Error
but an error appears:
Error: Invalid hook call. Hooks can only be called inside of the body
of a function component. This could happen for one of the following
reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
BUT browser version works. However after adding externals into webpack configuration, the node version works and browser does not.
React component file before bundling via webpack bundler
import React from "react";
import ReactDOM from "react-dom";
function Test() {
const [_, __] = React.useState(1);
return React.createElement("div", null, _); // ✅ <div>1</div> (works)
}
if (typeof window !== "undefined") { // because of UMD
ReactDOM.render(React.createElement(Test), document.getElementById("index")); // ✅ (works)
}
export default Test; // ✅
webpack configuration file
...
{
entry: "./index.js", // File described above
// The node version will work but the browser version will stop working after uncommenting the lines below
//
// externals: {
// react: 'react',
// 'react-dom': 'react-dom'
// },
mode: "development",
output: {
filename: "index.js",
globalObject: "this",
libraryTarget: "umd",
path: path.resolve("./public"),
publicPath: "",
},
},
...

Answer 1

BUT browser version works. However after adding externals into webpack configuration, the node version works and browser does not.
This maybe considered a workaround, but you could use two separate webpack configs, one for the node and the other for the browser version.
Edit:
Also for the node version not working: You're only have a require for ReactDOMServer, but not for ReactDom itself, maybe that is a problem, too.
I'm using this form, maybe give it a try:
externals: {
"react": {
"commonjs": "react",
"commonjs2": "react",
"amd": "react",
"root": "React"
},
"react-dom": {
"commonjs": "react-dom",
"commonjs2": "react-dom",
"amd": "react-dom",
"root": "ReactDom"
},
},