'Unable to resolve specifier' Issue with Deep/Nested imports

[IrfanShaik2010]

For which library do you need help?

native-federation

Question

Setup:

• Native Federation: ^20.1.7
• Angular: ^20.3.0
• Node: 22.20.0
• Browser: Edge (latest)

---

I have a remote application. After adding the Native Federation configuration, I tried running it independently using ng serve to confirm everything works before integrating it with the host. I encountered multiple errors. Since they all appear related, I’m grouping them here; however, please let me know if you prefer separate issues for better tracking.
(This is my first time creating an issue!)

I’m currently facing problems with four imports (so far—this is a large codebase, so more may surface once these are resolved):

Problem Imports

1. import localeInExtra from '@angular/common/locales/extra/en-IN';
2. import { map } from 'rxjs/internal/operators/map';
3. import * as Charts from 'fusioncharts/fusioncharts.charts';
4. import { AlignStyle } from 'quill/formats/align';

---

✔️ What I Managed to Fix (1 & 2)

1. Angular Locales – Nested Path

I resolved this by explicitly adding the nested path to the shared config:

'@angular/common/locales/extra/en-IN': {
  singleton: true,
  strictVersion: true,
  requiredVersion: 'auto'
},

This fixed the error.

However, a similar import works fine without any special handling:

import localeIn from '@angular/common/locales/en-IN';

I don’t understand why the first one fails while this one doesn’t. Any explanation would be appreciated.

---

2. RxJS Internal Import

I attempted a similar approach—adding the nested import to shared—but it didn’t work.

Instead, I switched from:

import { map } from 'rxjs/internal/operators/map';

to:

import { map } from 'rxjs';

This was based on discussions in issues #430 and #526.
Even though the package's exports section defines secondary entry points, they seem to be ignored.

Since our codebase has ~6000 files, I’m worried we’ll run into many similar imports and will have to refactor all of them. That doesn't feel right, so I may be missing something. Any guidance here would help a lot.

---

❌ Issues I Could NOT Resolve (3 & 4)

3. FusionCharts – Dotted Import Paths

According to issue #973, dotted import paths (e.g., fusioncharts.charts) should be avoided due to a Vite-related limitation.

However, FusionCharts officially documents this syntax:

import * as Charts from 'fusioncharts/fusioncharts.charts';

Renaming the package or restructuring it isn’t feasible for us (it’s an external dependency, and reinstalling would undo any local changes).

Is there any recommended workaround that doesn’t involve modifying the library?

---

4. Quill – Missing Secondary Entry Points

For Quill:

import { AlignStyle } from 'quill/formats/align';

Quill doesn’t declare secondary entry points at all, so I’m not sure what the correct solution should be here.

Any suggestions or clarification would be extremely helpful.

---

📌 Next Steps

I’ll create a minimal reproducible repository ASAP and update this issue with the link.

Thanks in advance!

[Aukevanoost]

Hi @IrfanShaik2010

Thanks for your detailed issue, I'll answer all four of them:

1. Actually this one I don't know that much, have you enabled the ignoreUnusedDeps feature in your federation.config.js? It should only install the i18n's that are actually used. You can read more in the docs since it's a special case.

2. This is actually because * exports are not handled well in NF yet and I have a PR open for that here.

3. Yeah We'll have to revisit this issue and see what we can do about it. Does it work in regular angular apps?

4. The issue here is that the package doesn't have any proper exports so we'll have to discover them during the bundling, we'll also have to investigate this one to see what goes wrong.

If you're experiencing other issues at other packages, you can also choose to bundle them as one single bundle like shown here (except for 4 since it's probably not included in the main bundle).

For now, with 2,3 and 4. You can easily opt out of this by adding them to the skiplist. This way they're bundled in the main micro frontend instead of external bundles. It's not ideal but it will fix most of the issues you're experiencing.

Hope this helps.

[IrfanShaik2010]

Hi @Aukevanoost, thanks for the quick response and for the detailed clarification 🙌

Here's the current situation:

1. Locales

   • Keeping the code as-is for now since it’s working. I’ll go through the documentation link you mentioned regarding ignoreUnusedDeps.

2. RxJS

   • Added to the skip list for now. Will keep an eye on that PR related to * exports handling.

3. FusionCharts

   • Yes, this works fine in a regular Angular app using esbuild alone. The error only occurs after enabling Native Federation.
   • Also added this to the skip list for now.

4. Quill

   • Added to the skip list as well.

Adding these to the skip list has resolved the original errors. However, I am now encountering a new issue:

SyntaxError: The requested module 'blob:https://localhost:5000/8a386a09-899e-41a5-a377-0185fa883327' does not provide an export named 'AttributeMap'
(at chunk-RVLQ64DR.js:4531:18)

I’ll search for existing issues related to this to find a solution.

[IrfanShaik2010]

Hi @Aukevanoost,

I noticed that the PR related to wildcard secondary entry points has now been merged and released in v21.0.0, so I upgraded the package in my project to test it out.

After upgrading, I’m now running into a new issue:

---

🆕 New Problem After Upgrading to v21.0.0

• When I serve the app and open it in the browser, I get multiple 404 (Not Found) errors for npm package chunks.
• I checked the dist folder and it seems:
  • Only files like chunk-<somevalue>.js are being generated.
  • No chunk files for npm packages appear to be generated anymore.
• Because of this, the browser fails to load those modules and throws 404 errors.

This issue only occurs after upgrading from 20.1.7 to 21.0.0.
If I revert back to 20.1.7, everything works as expected again.

---

Please let me know if this is a known issue with 21.0.0, or if there are any configuration changes required after this upgrade.

Thank you.

[Aukevanoost]

Hi @IrfanShaik2010, I think you ran into a known issue we patched yesterday. Make sure that your @softarc/native-federation package is version 3.4.1, purge your cache folder (node_modules/.cache) and try again! You can guarantee this by adding the version to the overrides in the package.json.

Keep me posted :)

[IrfanShaik2010]

Hey @Aukevanoost,

I followed the steps you mentioned and was able to resolve the chunk loading (404) issue ✅
However, the main issue with wildcard secondary entry points still persists.

I removed the rxjs package from the skip list, and I’m getting the same “unable to resolve specifier” error again.

🔧 Current Versions

• Native Federation: 21.0.2
• Also tested with: 21.0.1 and 21.0.0 → Issue still persists
• Angular: 20.x

So at the moment:

• ✅ Chunk issue is resolved
• ❌ Wildcard secondary entry point issue is still reproducible with RxJS

[Aukevanoost]

Yes you are correct, thanks for reporting this bug!
I'm on it: #1013

[tsapasMi33]

Hi there,

We are running into a similar issue as described in point 4.

In our case, we are using Jodit via ngx-jodit. In one of our components, we import some plugins directly:

import 'jodit/esm/plugins/source/source.js';
import 'jodit/esm/plugins/justify/justify.js';
import 'jodit/esm/plugins/resize-handler/resize-handler.js';
import 'jodit/esm/plugins/format-block/format-block.js';

On startup, we get warnings for each of these imports:

WARN If you don't need this package, skip it in your federation.config.js or consider moving it into depDependencies in your package.json
WARN No meta data found for shared lib jodit/esm/plugins/format-block/format-block.js

When the app is launched, the browser console shows:

ERROR Error: Unable to resolve specifier 'jodit/esm/plugins/source/source.js' imported from http://localhost:4203/routes.js
at throwUnresolved (es-module-shims.js:477:11)
at _resolve (es-module-shims.js:414:71)
at es-module-shims.js:932:32
at Array.map ()
at es-module-shims.js:925:45
at async loadAll (es-module-shims.js:502:5)
at async topLevelLoad (es-module-shims.js:602:5)

We tried adding these imports to the skip list in federation.config.js, but that did not solve the issue. I suspect this might be related to ignoreUnusedDeps being set to true.

From the previous comments in this thread, I did not fully understand how issue 4 was resolved.

Could you please clarify how we should handle these Jodit plugin imports or what the recommended configuration is in this case?

Thank you in advance for your help.

[Aukevanoost]

Hi @tsapasMi33,

Yeah it's because the "jodit" package doesnt have explicit exports, we don't support that type of export yet.

Therefore, the easiest way for you to fix this is adding this to your skiplist:

(pkg) => pkg.startsWith('jodit')