Cannot import classes from shared library about typemanager.ts HOT 2 CLOSED

Hi Offlein, thanks for an issue.

Check finally compiled code and compilation config in general. It seems that entities or TypeManager.TS library is included twice for different modules. Library uses unique symbol to resolve its data. When code got duplicated this will end up having several symbols. In your case one pointing to a common library and another one to application.

Code duplication usually happens when shared component targets old JS modules which copy the whole external library code in its own scope and exposes some global variables. For scenarios where libraries code should not be included in a shared components - some additional configs are usually required.

We have kind of the same config as you in your project cross several libraries. For example our EntityStore.TS library uses TypeManager.TS decorators with custom serializer which later used in JsonApiEntityProvider.TS which later used in target application and so far had no issues. However we have these special configs for old targets to avoid code duplication cross projects.

from typemanager.ts.

Hi Dmitry. I'm sorry to let this issue languish so long. Your advice was invaluable when I received it -- thanks -- even though I didn't quickly reply.

I am using Vue3 with Vite, and I don't remember what the state of my configuration was at the time, but in case it helps any future developer, I will include a list of key things I believe I checked.

My project was structured to have multiple apps, let's call them vue-app-a and vue-app-b, as well as directory featuring common vue code, vue-common.

• In each app's (vue-app-a's and vue-app-b's) tsconfig.json files:
  • Ensuring my include property references the common src code: "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "../vue-common/src/**/*"],
  • Setting up rootDirs like this: ["./", "../vue-common/"]
  • Setting up paths like this: { "@/*": ["./src/*"], "@vue-common/*": ["../vue-common/src/*"] },
• In each app's vite.config.ts file:
  • Setting up resolve with an alias property: { '@': fileURLToPath(new URL('./src', import.meta.url)), '@vue-common': path.join( __dirname, '../vue-common/src'), },
  • And probably most importantly, inside resolve, adding a dedupe property: [ '@dipscope/type-manager', ]

With this, I was able to include @dipscope/type-manager in my package.json for both the common code, handling shared entities, and also in vue-app-a and vue-app-b so they could have their own independent entities (which were sometimes children of the shared ones).

Thanks for your support.

from typemanager.ts.