module-federation / core

Module Federation is a concept that allows developers to share code and resources across multiple JavaScript applications

Home Page:https://module-federation.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issue: Incomplete Type Generation with DTS Plugin in module-federation/enhanced

kondensat01 opened this issue · comments

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; };

/@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:

  1. Run the build process to generate the .d.ts files using the DTS plugin from module-federation/enhanced.
  2. 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

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

@2heal1 seen a few requests for nested vendor modules to contain complete typings. Can we support this?