Troubleshooting "Module not found" error with react-dom/server in a Slack thread.

Module not found: Error: Can't resolve 'react-dom/server'

studio/schemas/objects

import ReactDOMServer from "react-dom/server";

"react-dom": "^16.13.1",

v12.16.3

import ReactDOMServer from '../node_modules/react-dom/server'

{iconsArray.icons.map((icon) => {
    const Icon = ReactIcons[icon];
    const rendered = ReactDOMServer.renderToString(Icon());

    return (
        <>
            <span className="btn" onClick={() => clearSearch()}>
                <button
                    style={{
                        background: "transparent",
                        borderRadius: "0.1rem",
                        margin: "0.1rem",
                    }}
                    onClick={() =>
                        onChange(createPatchFrom(rendered))
                    }
                >
                    <Icon />
                </button>
            </span>
        </>
    );
})}

{
    title: "Velg et hovedikon",
    description: "Søk etter ikoner:",
    name: "icon",
    type: "string",
    inputComponent: IconPicker,
},

// The patch function that sets data on the document
const createPatchFrom = (value) =>
    PatchEvent.from(value === "" ? unset() : set(String(value)));

import React from "react";
import ReactDOMServer from "../../node_modules/react-dom/server";
import PatchEvent, { set, unset } from "part:@sanity/form-builder/patch-event";
import FormField from "part:@sanity/components/formfields/default";

import * as ai from "react-icons/ai";
import * as bs from "react-icons/bs";
import * as di from "react-icons/di";
import * as fa from "react-icons/fa";
import * as fc from "react-icons/fc";
import * as fi from "react-icons/fi";
import * as gi from "react-icons/gi";
import * as go from "react-icons/go";
import * as gr from "react-icons/gr";
import * as io from "react-icons/io";
import * as md from "react-icons/md";
import * as ri from "react-icons/ri";
import * as ti from "react-icons/ti";
import * as wi from "react-icons/wi";
const ReactIcons = {
    ...ai,
    ...bs,
    ...di,
    ...fa,
    ...fc,
    ...fi,
    ...gi,
    ...go,
    ...gr,
    ...io,
    ...md,
    ...ri,
    ...ti,
    ...wi,
};

// The patch function that sets data on the document
const createPatchFrom = (value) =>
    PatchEvent.from(value === "" ? unset() : set(String(value)));

const IconPicker = (props) => {
    const { type, value = undefined, onChange } = props;
    const [iconsArray, setIconsArray] = React.useState({ icons: [] });
    const [pickerValue, setPickerValue] = React.useState([]);
    const [searchQuery, setSearchQuery] = React.useState();

    const handleChange = (query) => {
        setPickerValue(query);
        const arr = [];
        Object.keys(ReactIcons).map((go) => {
            if (
                go.toLowerCase().includes(query.toLowerCase()) &&
                query.length > 2
            ) {
                arr.push(go);
                setIconsArray({ icons: arr });
            }
        });
    };

    // If deleting searchquery, clear icons
    React.useEffect(() => {
        if (pickerValue.length < 2) {
            setIconsArray({ icons: [] });
        }
    }, [pickerValue]);

    // On icon select
    const getIcon = (icon) => {
        const Icon = ReactIcons[icon];
        return (
            <>
                <Icon />
            </>
        );
    };

    const clearSearch = () => {
        setPickerValue([]);
        setSearchQuery("");
    };
    return (
        <>
            <FormField
                label={type.title}
                description={
                    value !== undefined ? "Valgt ikon: " : type.description
                }
            >
                {value !== undefined ? (
                    <div style={{ position: "relative" }}>
                        <p style={{ fontSize: "2rem" }}>
                            {getIcon(value)} <b>{value}</b>
                        </p>
                        <button
                            style={{
                                fontSize: "1.5rem",
                                position: "absolute",
                                top: 0,
                                right: 0,
                                background: "transparent",
                                color: "red",
                                border: 0,
                            }}
                            onClick={() => onChange(createPatchFrom(""))}
                        >
                            {getIcon("AiFillCloseCircle")}
                        </button>
                    </div>
                ) : (
                    ""
                )}
                <input
                    type="text"
                    onChange={(event) => handleChange(event.target.value)}
                    className="DefaultTextInput_input_2wVzD text-input_textInput_31n9_ text-input_root_1xAqy"
                />
                {iconsArray.icons.map((icon) => {
                    const Icon = ReactIcons[icon];
                    const iconRendered = ReactDOMServer.renderToString(Icon());

                    return (
                        <>
                            <span className="btn" onClick={() => clearSearch()}>
                                <button
                                    style={{
                                        background: "transparent",
                                        borderRadius: "0.1rem",
                                        margin: "0.1rem",
                                    }}
                                    // Working:
                                    // onClick={() =>
                                    //     onChange(createPatchFrom(icon))
                                    // }
                                    // Not working
                                    onClick={() =>
                                        onChange(createPatchFrom(iconRendered))
                                    }
                                >
                                    <Icon />
                                </button>
                            </span>
                        </>
                    );
                })}
            </FormField>
        </>
    );
};

export default IconPicker;

const createPatchFrom = value => PatchEvent.from(value === '' ? unset() : set(value))