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

Question

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

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

盖茨比开发

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

gatbsy 构建

导致

WebpackError：不变失败

重现步骤： 盖茨比新 npm 安装react-admin npm 安装 ra-data-simple-rest

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

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

终端输出

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

环境 Windows 10 和 WSL Ubuntu 18.04 上的结果相同

来自 package.json "盖茨比": "^2.22.15", "盖茨比图像": "^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", "道具类型": "^15.7.2", “反应”：“^16.12.0”， "react-admin": "^3.5.5", "react-dom": "^16.12.0", “反应头盔”：“^6.0.0”

Answer 1

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

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

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

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

1) 在 SSR 期间用虚拟模块替换有问题的模块 ¹

此代码片段应该在运行服务器端渲染时替换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 构建过程中拉出来，并防止 Gatsby 窒息。

import loadable from '@loadable/component';

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

Answer 2

通过在静态页面上使用

react-router-dom

MemoryRouter，我能够使用第三种策略让react-admin在gatsby内部工作。当您单击资源时，您不会更新浏览器 URL，但它至少会构建。

import simpleRestProvider from 'ra-data-simple-rest';

const AdminApp = () => {
  return (
    <MemoryRouter>
      <Admin
        dataProvider={simpleRestProvider(`${API_URL}/admin`, authFetch)}
      >
        <Resource name="orders" list={OrderList} show={OrderShow} />
      </Admin>
    </MemoryRouter>
  )
};

还需要为路由登录、注销和身份验证回调路由创建单独的页面，以实际处理

ra-auth-auth0

提供的异步功能。 Gatsby 并没有让整合 React-admin 变得容易，但现在它已经全部集成并且运行良好。