没有找到ReactDOMServer，但它在package.json上

Question

我在我的npm start日志上得到了这个结果：

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

我的项目是一个库，在lib/lab中分隔，目录如下

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

在lib已经部署组件的地方，lab是我现在正在研究的组件

我想做的只是

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

在实验室中的一个组件中，但是得到了上面的错误

在所有package.json文件上都安装了react dom：

./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和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"
    },

所以..。它看起来像是安装了react，因此我应该能够使用react/server作为一个导入。但不能..。有什么想法吗？

Answer 1

问题的解决实际上是使用gatsby节点。

在配置中，添加别名(按照这个顺序，如果反向不起作用)

/** @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"),
                },
            },