我试图基于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上讨论此问题,而我在here或here方面发现了有趣的错误报告。不幸的是,到目前为止,我还没有找到可行的解决方案。
答案 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))
}
诚然,我更期待redux
或react-redux
而不是react-admin
的别名,而且我还不明白为什么这会导致翻译中描述的问题。如果有人对此有更详细的信息,请发表评论!暂时,我将继续前进,希望“ A”组件和“ B”组件之间的交互能够正常进行。