在另一个React Admin应用中消耗来自React Admin应用的资源

时间:2019-07-02 16:17:45

标签: reactjs react-admin

我试图基于React Admin设置两个项目,其中一个项目“ A”充当基础项目,另一个“ B”消耗基础项目的资源并在其基础上添加自己的资源。

通过“纱线链接”使“ B”可使用“ A”。要消耗“ 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”项目中的“纱线开始”)时,对translate的调用最终会在TranslationContext中结束,而该返回只是返回键。

还有其他我想念的地方吗?

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

更新2 问题似乎归结为以下事实:“ A”和“ B”都具有redux,react-redux等依赖项,并且根据“ A”或“ B”零件正在导入它们。通常会在here上讨论此问题,而我在herehere方面发现了有趣的错误报告。不幸的是,到目前为止,我还没有找到可行的解决方案。

1 个答案:

答案 0 :(得分:0)

当我为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))
}

诚然,我更期待reduxreact-redux而不是react-admin的别名,而且我还不明白为什么这会导致翻译中描述的问题。如果有人对此有更详细的信息,请发表评论!暂时,我将继续前进,希望“ A”组件和“ B”组件之间的交互能够正常进行。