I'm using the module-federation/enhanced plugin in my microfrontend architecture, and I've encountered an issue with the DTS plugin that's part of this package. The DTS plugin is supposed to generate TypeScript declaration files (.d.ts) for sharing types between different microfrontends. However, it seems to struggle with generating complete type definitions when the types are indirectly dependent on other libraries.
Specifically, the problem arises with libraries that are dependencies of other libraries. For example, when using @reduxjs/toolkit, which internally depends on libraries like immer and reselect, the DTS plugin successfully generates types for @reduxjs/toolkit itself. However, it fails to generate types for the internal dependencies like reselect, leading to incomplete type definitions where these dependencies are involved.
Example
Here’s an example of a generated type that illustrates the problem:
/@mf-types/catalog/node_modules/@reduxjs/toolkit/dist/index.d.ts
`import { ActionCreator, Action, Middleware, StoreEnhancer, UnknownAction, Reducer, ReducersMapObject, Store, StateFromReducersMapObject, Dispatch, MiddlewareAPI } from 'redux';
export * from 'redux';
import { Draft } from 'immer';
export { Draft, produce as createNextState, current, freeze, isDraft, original } from 'immer';
import * as reselect from 'reselect';
import { createSelectorCreator, weakMapMemoize, Selector, CreateSelectorFunction } from 'reselect';
`
**all imports are "Cannot find module '{dependencies}' or its corresponding type declarations."**
In the example above, the Selector type is supposed to be imported from reselect, which is a dependency of @reduxjs/toolkit. However, the generated type results in any because the DTS plugin does not generate the necessary types from reselect.
**Expected Behavior**
The DTS plugin should correctly resolve and generate types not only for the primary libraries like @reduxjs/toolkit but also for the internal dependencies like reselect, immer, and others that are used by these primary libraries. This would ensure that all types are correctly defined and usable in other microfrontends.
**Actual Behavior**
While the types for @reduxjs/toolkit are generated correctly, the types for its internal dependencies are not. As a result, any types that rely on these internal dependencies are incomplete, often resulting in any types where specific type definitions should exist.
**Steps to Reproduce**
Setup a Microfrontend Application:
1. Use module-federation/enhanced with the DTS plugin to manage and share types between microfrontends.
2. Include a Redux Toolkit Selector:
3. In one of the microfrontends, create and expose a selector using @reduxjs/toolkit. This selector should rely on types provided by internal dependencies like reselect.
4. Expose the Selector:
5. Configure the module federation to expose the selector for use in other microfrontends. For example:
`
// catalog/src/app/selectors/sessionSelectors.ts
import { createSelector } from '@reduxjs/toolkit';
export const selectIsAuth = createSelector(
(state: { session: ISession }) => state.session,
(session) => session.isAuthenticated
);
`
6. Generate the Type Declarations:
7. Run the build process to generate the .d.ts files using the DTS plugin from module-federation/enhanced.
8. Observe the Type Definitions:
Check the generated .d.ts files. You should notice that while the type for the selector itself (Selector) is attempted to be resolved, it ends up as any because the types from reselect (an internal dependency of @reduxjs/toolkit) are not correctly generated or included.
### Reproduction
https://github.com/module-federation/module-federation-examples/tree/master/typescript-react-monorepo
### Used Package Manager
pnpm
### System Info
```shell
System:
OS: macOS 14.6.1
CPU: (8) arm64 Apple M1
Memory: 105.50 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.16.0 - /usr/local/bin/node
Yarn: 1.22.22 - /opt/homebrew/bin/yarn
npm: 10.8.1 - /usr/local/bin/npm
pnpm: 9.6.0 - /usr/local/bin/pnpm
Browsers:
Brave Browser: 127.1.68.134
Chrome: 127.0.6533.100
Safari: 17.6
```
### Validations
- [X] Read the [docs](https://github.com/module-federation/core).
- [X] Read the [common issues list](https://github.com/module-federation/core/issues).
- [X] Check that there isn't [already an issue](https://github.com/module-federation/core/issues) that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Module federation issue and not a framework-specific issue.
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Describe the bug
I'm using the module-federation/enhanced plugin in my microfrontend architecture, and I've encountered an issue with the DTS plugin that's part of this package. The DTS plugin is supposed to generate TypeScript declaration files (.d.ts) for sharing types between different microfrontends. However, it seems to struggle with generating complete type definitions when the types are indirectly dependent on other libraries.
Specifically, the problem arises with libraries that are dependencies of other libraries. For example, when using @reduxjs/toolkit, which internally depends on libraries like immer and reselect, the DTS plugin successfully generates types for @reduxjs/toolkit itself. However, it fails to generate types for the internal dependencies like reselect, leading to incomplete type definitions where these dependencies are involved.
Example Here’s an example of a generated type that illustrates the problem:
declare const selectIsAuth: import("@reduxjs/toolkit").Selector<{ session: ISession; }, boolean, []> & { unwrapped: (state: ISession) => boolean; };