时间戳

首页 > 解决方案 > react-admin 作为 Gatsby 项目中的一个页面

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

问题描述

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

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

盖茨比发展

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

盖茨构建

导致

WebpackError：不变式失败

重现步骤： gatsby new _____ npm install react-admin npm install ra-data-simple-rest

gatsby 开发 = OK gatsby 构建 = 失败

终端输出 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”

标签： reactjsgatsbyreact-admin

解决方案

从您的存储库中，听起来您找到了答案，但您不喜欢它。

Gatsby 不能为 react-admin 做 SSR，因为 react-admin 依赖于在浏览器中运行。要将 react-admin 集成到 Gatsby 中，您需要将管理区域生成为仅客户端路由。

无论如何，我希望管理区域是仅限客户端的路由，因为它们需要身份验证才能查看。在构建时用真实数据填充它们可能会产生数据安全问题。

在您的示例存储库中，您提到了这些解决问题的方法。我将在这里记录它们以供后代使用：

1) 在 SSR 1期间用假人替换有问题的模块

此代码段应在运行服务器端渲染时替换 react-admin 模块，并导致编译成功：

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

2) 使用loadable-components2

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

import loadable from '@loadable/component';

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

推荐阅读