Again! So i have a package lets call it 'uSync'. that has a custom modal dialog, that we pass some data and it renders a view based on that data (its' change details, but i don't think the that matters much here). I also have another package lets call that 'uSync.Complete' that uses uSync and its own views where i want to launch up that custom dialog from the first package. so the first package exports the dialog/token so it can be consumed by another package. the second package, connects to the thing.

ts
const detailsModal = this.#modalManagerContext?.open(this, USYNC_DETAILS_MODAL, {
   data: {
      item: action,
   },
});

All stadard and all 'working' at a typescript level. problem comes from how the package(s) are bundled i think. because in Umbraco we get :

index.js:27  Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "usync-details-modal" has already been used with this registry
    at https://localhost:44302/umbraco/backoffice/c5264d27ed374c283a729f998d59bceda50d8626/external/lit/index.js:27:101
    at _ (https://localhost:44302/App_Plugins/uSync/details-modal-element-CIinhEQ3.js:5:42)
    at https://localhost:44302/App_Plugins/uSync/details-modal-element-CIinhEQ3.js:44:5

I think that is because with VITE building the uSync.Complete package it will include the elements of the uSync package we have used. and that means things are being defined twice in umbraco If i tell vite to treat the usync package as an external resource in the vite.config :

ts
external: [/^@umbraco/, /^@jumoo\/usync-assets/],

then i get a diffrent error in the browser .. because it doesn't know how to import @jumoo/usync-assets

entry-point-extension-initializer.js:41  Uncaught (in promise) TypeError: Failed to resolve module specifier "@jumoo/usync-assets/dialogs". Relative references must start with either "/", "./", or "../"

throwing a question out there is is this what import map ? does ?

So i think i know what i have to do (if i am right) - but it would be good to get confirmation. 1. I need to export my package in more a "lib" style format (e.g like a node_module with folder and files in them) 2. I need to put importmap into my umbraco-package.json so that we can map the

@jumoo/usync-assets

imports to folders e.g

json
"importmap": {
   "imports": {
      "@jumoo/usync-assets/dialogs": "/App_Plugins/uSync/lib/dialogs/index.js"    
   }
}

this probibly means i don't want vite to do anything clever with my build? because i want the library to be predictable ? so the other packages can look it up ? is this the right way to be heading ?

Another (and probibly way worse) method i am looking at is just making vite output each file into the app_plugins.

ts
rollupOptions: {
    external: [/^@umbraco/],
    output: {
    manualChunks: (f) => {
            if (f.indexOf('src') > 0) {
               let path =    f.substring(f.indexOf('src') + 4);
               path = path.substring(0, path.length - 3);
               console.log(path);
               return path;
            }
    },
        chunkFileNames: '[name].js',
  },
  onwarn: () => {},
},

this outputs everything into a folder structure directtly into the app_plugins, but with the added advantage of external libraries being bundles (so i don't have to rebuild them esp my autogenerated API folder).

then in theory ? i can do the import map direct to the right files ?

Reader ... That's a stupid idea 😔

**sorry, worried i sounded to dismissive there, am happy your thinking about this, and i will almost certainly use what you've said *