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

IT技术 reactjs gatsby react-admin
2021-05-03 14:01:54

希望 我想在 Gatsby 项目中包含 react-admin 以便我可以有一个 /admin 路由，它将成为站点数据的接口。

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

盖茨比发展

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

gatbsy 构建

造成

WebpackError：不变失败

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

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

gatsby develop = OK gatsby build = 失败

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

1个回答

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

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

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

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

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

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

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
其它你可能感兴趣的问题
上一篇当在 mobx 商店中更改状态时，Ant-Design Table 不呈现 下一篇Reactjs：带有 reactjs 的 jQuery 自定义内容滚动器