@module-federation/nextjs-mf - Typescript support

[james-lee1989]

I installed @module-federation/nextjs-mf^6.5.1 in my remote and consuming Next.js application.
Next.js version is 13.1.

Is it possible to export types in remote applications so that I can import those types in consuming applications?
Because I want to see the props of each remote component.

Looking forward to the answers.

Thanks in advance!

[ilteoood]

You should use the typescript or native-federation-typescript plugin provided here

[james-lee1989]

Hi @ilteoood,
Thanks for the answer.

I think @module-federation/nextjs-mf supports typescript. However, if I should use native-federation-typescript, can you please let me know if that can support Next.js and SSR?
And did you mean this plugin?
module-federation/typescript

[ilteoood]

I mean of these plugins:

• https://github.com/module-federation/universe/tree/main/packages/typescript
• https://github.com/module-federation/universe/tree/main/packages/native-federation-typescript

[james-lee1989]

Thank you, let me check them out .

[james-lee1989]

Thank you so much @ilteoood , it worked!

[ilteoood]

Which one did you used?

[james-lee1989]

I used this one.
https://github.com/module-federation/universe/tree/main/packages/typescript
Could you let me know the difference between those two?

[james-lee1989]

Hi @ilteoood,
Hope you are doing well.

I faced another issue here. I have 3 applications, let's say App1, App2, App3.
App2 and App3 consume app1 components.
And App3 consumes App2 component as well.

I got an error while building the App2 using @module-federation/typescript

info  - Creating an optimized production build
Failed to compile.

Error: something went wrong generating declaration files
    at TypescriptCompiler.generateDeclarationFiles (D:\Projects\App2\node_modules\@module-federation\typescript\src\lib\TypescriptCompiler.js:46:15) 
    at FederatedTypesPlugin.compileTypes (D:\Projects\App2\node_modules\@module-federation\typescript\src\plugins\FederatedTypesPlugin.js:65:29)     
    at D:\Projects\App2\node_modules\@module-federation\typescript\src\plugins\FederatedTypesPlugin.js:51:39
    at Hook.eval [as call] (eval at create (D:\Projects\App2\node_modules\next\dist\compiled\webpack\bundle5.js:13:28549),<anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (D:\Projects\App2\node_modules\next\dist\compiled\webpack\bundle5.js:13:25819)
    at Compiler.newCompilation (D:\Projects\App2\node_modules\next\dist\compiled\webpack\bundle5.js:28:146821)
    at D:\Projects\App2\node_modules\next\dist\compiled\webpack\bundle5.js:28:147641
    at Hook.eval [as callAsync] (eval at create (D:\Projects\App2\node_modules\next\dist\compiled\webpack\bundle5.js:13:28771), <anonymous>:6:1)     
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\Projects\App2\node_modules\next\dist\compiled\webpack\bundle5.js:13:25925)
    at Compiler.compile (D:\Projects\App2\node_modules\next\dist\compiled\webpack\bundle5.js:28:147567)

I think this is related type declarations for the remote App1.

Did anyone face this problem?

Thanks

[ilteoood]

I don't know, I'm the maintainer of the @module-federation/native-federation-typescript plugin, maybe @pavandv can help here?

[pavandv]

Hi @superdev0421, does App1 consume app2 or app3? If so, then the build process is going into circular dependency.

Can you provide me infrastructure (debug) logs as well please. You can find how to turn on debug level in the readme file.

[james-lee1989]

Hi @pavandv, App1 doesn't consume any app2 or app3.

[james-lee1989]

Which readme file do you mean?