reactjstypescriptimporterrorreact-domreact-dom-server

ReactDOMServer not found, but it is on package.json


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

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?


Solution

  • 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"),
                    },
                },