如何从nx/nrwl中的快递应用程序导入react库

Question

我使用nx来管理我的monorepo，我有一个带有adminjs的快捷应用程序，它需要react组件。

当我试图从我的库中将一个react组件导入到这个应用程序时，我得到了：

'@nx/admin-ui-components' is imported by apps/admin-ui/src/TestInner.ts, but could not be resolved – treating it as an external dependency

这个库本身没有问题，它适用于其他应用程序。

有什么想法吗？

$ npx nx report
npx nx report

 >  NX   Report complete - copy this into the issue template

   Node : 17.6.0
   OS   : darwin arm64
   yarn : 1.22.18

   nx : 14.4.3
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.4.3
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.4.3
   @nrwl/eslint-plugin-nx : 14.4.3
   @nrwl/express : 14.4.3
   @nrwl/jest : 14.4.3
   @nrwl/js : 14.4.3
   @nrwl/linter : 14.4.3
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 14.4.3
   @nrwl/nx-cloud : 14.2.0
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.4.3
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.4.3
   @nrwl/web : 14.4.3
   @nrwl/workspace : 14.4.3
   typescript : 4.7.4
   ---------------------------------------
   Community plugins:

Answer 1

所以问题是我告诉adminjs将文件捆绑在一起，它使用遮罩下的rollup，这当然不知道nx。

因此，解决方案是导入到"nx“中的组件并将其注入adminjs。

import ToolEditor from "./ToolEditor"

// @ts-ignore
AdminJS.UserComponents = AdminJS.UserComponents || {}
// @ts-ignore
AdminJS.UserComponents["ToolEditor"] = ToolEditor

// and then in adminjs options
{
...
component: AdminJS.bundle("ToolEditor"),
}