在另一个 React Admin 应用程序中使用来自 React Admin 应用程序的资源

Question

我正在尝试基于 React Admin 设置两个项目，其中一个项目“A”充当基础项目，另一个项目“B”使用基础项目中的资源并在其之上添加自己的资源。

“A”通过“yarn link”提供给“B”。要使用“A”中的资源（即列表/编辑/查看组件），我必须克服导入的 JSX 文件预计已经使用此处描述的方法编译的限制：Sharing source code and libraries in React

除了 i18n 之外，一切似乎都运行良好。我在我的“B”项目中创建 i18n 提供程序，从“A”项目导入消息并将 i18n 提供程序传递给“B”的<Admin> 组件，但在运行时没有解析任何翻译键。

我已验证 1. i18n 提供程序已被调用，并且 2. 消息已正确导入到“B”中。

但是，当我单独运行“A”时（在“A”项目中使用“yarn start”），对 translate 的调用最终会出现在 Polyglot 代码中。当我运行“B”（“B”项目中的“yarn start”）时，对translate 的调用最终会在TranslationContext 中返回，它只是返回密钥。

还有什么需要我在这里遗漏的吗？

更新 1 我还尝试删除我目前从“A”导入的 appLayout。如果我依赖 React Admin 在“B”中生成的默认布局，则菜单项会正确翻译。

更新 2 问题似乎归结为“A”和“B”都具有 redux、react-redux 等依赖项，并且它们的解决方式不同，具体取决于“ A" 或 "B" 零件正在导入它们。这个问题通常在here 进行讨论，我在here 或here 发现了这方面的有趣错误报告。不幸的是，到目前为止我还没有找到可行的解决方案。

Answer 1

当我为 react-admin 添加 webpack 别名时，问题似乎得到了解决，以避免它通过 A/react-admin 和一次通过 B/react-admin 解决。

由于我使用的是customize-cra，这意味着像这样增强我的config-overrides.js：

var fs = require ('fs');
var resolveFrom = require('resolve-from');
const {
    override,
    babelInclude,
    addWebpackAlias
} = require("customize-cra");

module.exports = function (config, env) {
    return Object.assign(config, override(
        // this part was required to be able to work with uncompiled JSX from the "A" library:
        babelInclude([
            path.resolve('src'),
            fs.realpathSync('node_modules/A/src')
        ]),
        // this part was added to resolve the issue:
        addWebpackAlias({
            ['react-admin']: resolveFrom(path.resolve('node_modules'), 'react-admin')
        })
    )(config, env))
}

诚然，我更期待 redux 或 react-redux 的别名，而不是 react-admin 的别名，我还不明白为什么这会导致所描述的翻译问题。如果有人对此有更详细的信息，我将不胜感激！目前，我会继续前进，希望“A”组件和“B”组件之间的交互能够完美运行。