I am getting nrwl nx e…

1 minute read

I am getting @nrwl/nx/enforce-module-boundaries by just importing a lib from an app, I have done it in the past without problems, not sure why it is a problem now

Responses:

My ESLint config is the default one: "@nrwl/nx/enforce-module-boundaries": [ "error", { "enforceBuildableLibDependency": true, "allow": [], "depConstraints": [ { "sourceTag": "*", "onlyDependOnLibsWithTags": ["*"] } ] } ]

From apps/app/src/app/pages/OnBoarding/steps.ts I am importing import { OnBoardingState } from '@scope/auth'; which has in its index.js : export * from './pages/on-boarding/OnBoarding'; and OnBoardingState is an exported type.

I also have no tags defined in nx.json

I am using: @nrwl/angular : Not Found @nrwl/cli : 9.4.2 @nrwl/cypress : 9.4.2 @nrwl/eslint-plugin-nx : 9.4.2 @nrwl/express : Not Found @nrwl/jest : 9.4.2 @nrwl/linter : 9.4.2 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/react : 9.4.2 @nrwl/schematics : Not Found @nrwl/tao : 9.4.2 @nrwl/web : 9.4.2 @nrwl/workspace : 9.4.2 typescript : 3.9.5

Ok, the problem is that I am lazy loading some components from this library

and in another component I am loading it directly, I need a different export

So, this approach is not compatible

When debugging the lint rule I found that when you do import('@scope') it marks it a dynamic dependency, then you can’t directly import it

What are my options here?

My current status: Lazy loading: ```export const LegalTermsLazy = lazy(() => import(/* webpackChunkName: “auth” */ ‘@scope/auth’).then((res) => ({ default: res.LegalTerms, })) );

export const LoginLazy = lazy(() => import(‘@scope/auth’).then((res) => ({ default: res.Login })) );

export const ResetPasswordLazy = lazy(() => import(‘@scope/auth’).then((res) => ({ default: res.ResetPassword })) );

export const OnBoardingLazy = lazy(() => import(‘@scope/auth’).then((res) => ({ default: res.OnBoarding })) );```

Updated: