react-admin 作为 Gatsby 项目中的一个页面

Question

期待我想在 Gatsby 项目中包含 react-admin，这样我就可以拥有一个 /admin 路由，它将成为站点数据的接口。

发生了什么： 使用 gatbsy new ，我设置了一个样板 gatsby 项目。然后安装 react-admin 并在 gatsby 项目中添加一个页面，同时遵循 react-admin tutorial，导致 gatsby 构建失败。

gatsby develop

看起来不错，应用程序不会崩溃，但是

gatbsy build

导致

WebpackError: Invariant failed

重现步骤： 盖茨比新 _____ npm 安装反应管理员 npm 安装 ra-data-simple-rest

向 gatsby 的页面文件夹添加一个最小的管理页面

gatsby 开发 = OK 盖茨比构建=失败

终端输出 https://imgur.com/6M6XtME

相关代码： 这是一个可以克隆以重现的存储库： https://github.com/jzohdi/react-admin-gatsby-test

环境 Windows 10 和 WSL Ubuntu 18.04

上的结果相同

来自 package.json "gatsby": "^2.22.15", "gatsby-image": "^2.4.5", "gatsby-plugin-manifest": "^2.4.9", "gatsby-plugin-offline": "^3.2.7", "gatsby-plugin-react-helmet": "^3.3.2", "gatsby-plugin-sharp": "^2.6.9", "gatsby-source-filesystem": "^2.3.8", "gatsby-transformer-sharp": "^2.5.3", "prop-types": "^15.7.2", "react": "^16.12.0", "react-admin": "^3.5.5", "react-dom": "^16.12.0", "react-helmet": "^6.0.0"

Answer 1

从你的知识库来看，你似乎找到了答案，但你不喜欢它。

Gatsby 无法为 react-admin 执行 SSR，因为 react-admin 依赖于浏览器中的运行。要将 react-admin 集成到 Gatsby 中，您需要将管理区域生成为 client-only routes。

我希望管理区域无论如何都是 client-only 路由，因为它们需要身份验证才能查看。在 build-time 处用真实数据填充它们可能会造成数据安全问题。

在您的示例存储库中，您提到了这些解决问题的方法。我要把它们记录在这里以供后人参考：

1) 在 SSR ¹

期间用虚拟模块替换有问题的模块

此代码段应该在运行 server-side 渲染时替换 react-admin 模块，并导致编译成功：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-admin/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

2) 使用`loadable-components`²

不是直接导入 react-admin 组件，而是将它们包装在 loadable 函数中。这将它们从 HTML-build 过程中拉出来，并防止 Gatsby 窒息。

import loadable from '@loadable/component';

const reactAdmin = loadable() => import('react-admin');
const { Admin, Resource } = reactAdmin

react-admin 作为 Gatsby 项目中的一个页面

react-admin as a page in Gatsby project

reactjs

gatsby

react-admin

1) 在 SSR ¹

2) 使用`loadable-components`²

react-admin 作为 Gatsby 项目中的一个页面

react-admin as a page in Gatsby project

reactjs

gatsby

react-admin

1) 在 SSR 1

2) 使用loadable-components2

1) 在 SSR ¹

2) 使用`loadable-components`²