reactjs 在nextjs和组件工作区之间共享i18next翻译

wkyowqbh  于 2023-02-15  发布在  React
关注(0)|答案(1)|浏览(153)

我们有一个Yarn2 monorepo设置,具有以下工作区:

/root
  /app (nextjs)
  /components (individual react functional components)
  /storybook
  /constants

目前,/app将i18next翻译文件存储在工作区本地,但我希望将其移动到constants工作区,以便所有工作区可以共享相同的翻译。将翻译移动到那里并将其加载到/app和/storybook工作区中没有问题。
此外,目前所有的翻译都只在/app中进行。/components工作区没有翻译,翻译后的文本通过props传递给哑组件。因此,/app中的组件看起来像这样:

import ListBox from "@root/components/ListBox";
import {useTranslation} from "react-i18next";

export default const Page() {
  const [t] = useTranslation();
  const label = t("listBoxLabel"); // <-- exists in en.json as a key
  
  return (
    <div>
      <ListBox label={label} />
    </div>
  )
}

因此,Storybook还必须提供"标签"属性来呈现故事中的组件,其方式与此基本相同。
我想做的是在/components工作区级别翻译文本,这样翻译就可以在一个使用它的地方完成,以减少 prop 钻取并简化操作。
大概是这样的/组件/列表框. js:

import {useTranslation} from "react-i18next";

export default const ListBox() {
  const [t] = useTranslation();
  const label = t("listBoxLabel"); // <-- exists in en.json as a key
  
  return <p>{label}</p>
}

当我运行这段代码时,它只会在Storybook和nextjs应用程序中打印出翻译键"listBoxLabel"。
我可以通过用I18nextProvider Package 故事,并在/components工作区中更改i18next和react-i18next的依赖关系,将它们从普通依赖关系移动到对等依赖关系,从而修复故事书,故事书正确地呈现了翻译。然后NextJS/app在导入/components/ListBox.js代码时抛出react-i18next模块未找到的错误。components工作区保留了一个正常的依赖项,但在这种情况下不会转换它。如果我完全删除/components依赖项,/storybook将不会编译和启动,原因与此相同。
然而,在应用程序或故事书中复制这段代码会显示正确的翻译,所以,这与从monorepo的兄弟工作区导入代码有关,我不确定如何在nextjs应用程序中修复这个问题。
只是一个提示:我没有使用next-i18next组件,而是直接使用react-i18next,没有配置任何提供程序,我尝试用I18nextProvider组件 Package 应用,类似于故事书中的故事,但没有成功。
有没有人知道在哪里可以进一步寻找或者尝试什么?我认为从工作区组件库加载一个组件并在库中进行转换是一个常见的场景,但是我还没有发现其他人遇到这个问题。

jutyujz0

jutyujz01#

我不知道到底是什么原因导致了这个问题,但它似乎是一个nextjs,webpack,或yarn错误。我发现这个问题与我的@root/app工作区中的tsconfig.js文件有关:

{
  "compilerOptions": {
    "paths": {
      "@root/components/*": ["../components/*"]
    }
  }
}

我可以通过删除这个设置来修复这个问题,但是它破坏了其他代码(一些组件是typescript),所以我只是在定制的.d.ts文件中显式地将这些组件模块声明为模块。
下一个/纱虫出现的地方:在我删除了这一行,并且重新启动了开发服务器之后,i18 n翻译仍然是坏的。2直到我去接触了components/ListBox. js文件。3这导致了一些东西在next中重建,并且翻译显示出来。
ListBox.js文件不是 typescript ,所以我不明白为什么这会导致问题。
在试图解决这个问题时,yarn一直处于糟糕的状态,接下来是告诉我我没有安装 typescript ,以及其他多个乏味的随机错误...真是一团糟。

相关问题