ReactDOMServer not found, but it is on package.json

Question

I'm getting this result on my npm start log:

Can't resolve 'react-dom/server' in 'C:\Users\Alvaro\git\Fancy\lab\src\components\data-visualization\chart'

If you're trying to use a package make sure that 'react-dom/server' is installed. If you're trying to use a local file make sure that the path is correct.
failed Re-building development bundle - 0.607s

my project is a library, separated in lib/lab with directory like

• ./package.json
• ./lib/package.json
• ./lab/package.json

where lib is already deployed components, lab is the ones I'm working on right now

I'm trying to do just

import * as ReactDOMServer from "react-dom/server";

in a component inside lab , but getting the error above

react-dom is installed on all package.json files:

./package.json

"devDependencies": {
        ...
        "@types/react": "16.14.8",
        "@types/react-dom": "^16.9.10",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        ...
},
"peerDependencies": {
    "react": ">=16",
    "react-dom": ">=16"
},

lab/package.json and lib/package.json

"devDependencies": {
        ...
        "@types/react": "16.14.8",
        "@types/react-dom": "^18.0.6",
        "react": "17.0.2",
        "react-dom": "^17.0.2"
    },
    "peerDependencies": {
        "react": ">=16",
        "react-dom": ">=16"
    },

So... it looks like react-dom is installed, therefore I should be able to use react-dom/server as an import.. but can't.. any ideas?

Answer 1

Solved, problem was actually with gatsby-node

On the configurations, added the alias (in this order, if reverse it doesn't work)

/** @type {import('gatsby').GatsbyNode} */
module.exports = {
    onCreateWebpackConfig: ({ actions }) => {
        actions.setWebpackConfig({
            resolve: {
                alias: {
                    //These aliases are needed so we always end up with the same instance of react
                    // otherwise we get a version from the root, and one from lib/lab, which crashes at runtime when hooks are used.
                    react: require.resolve("react"),
                    "react-dom/server": require.resolve("react-dom/server"),
                    "react-dom": require.resolve("react-dom"),
                },
            },