Is there a way to expose named export?

[snnsnn]

Hi,
I opened the same issue in the book but did not get any attention, so, sorry for repeating. I was asking if there is a way to expose named exports?

[ScriptedAlchemy]

i have not had any issue exposing named exports. are you using this with React.lazy or something? you can expose the whole module, then destructure the export you want

[snnsnn]

@ScriptedAlchemy @jherr Yes, I was using React.lazy. This does not work:

const { Header, Footer } = React.lazy(() => import('remote/Tab'));

But regular import works as expected:

import { Header, Footer } from 'remote/Tab';

Here is the Tab component:

import React from 'react';

export const Header = ({ children }) => (
  <section className="header">{children}</section>
);

export const Footer =  ({ children }) => (
  <section className="footer">{children}</section>
);

Turns out named imports are not supported by React.lazy at the moment:

This RFC has a limited surface. It's targeted at the main use case we want to start handling (default imports). There is a door open for supporting named imports in future RFCs, but it is out of scope of this one. This one is intentionally very limited. We expect to understand this problem space more within the next several months and then we can revisit that discussion with a better understanding.
reactjs/rfcs#64 (comment)

I thought keeping sub-components as property under a default one would work, but it didn't:

import React from 'react';

export const Header = ({ children }) => (
  <section className="header">{children}</section>
);

export const Footer =  ({ children }) => (
  <section className="footer">{children}</section>
);

const Tab = ({ children }) => (
  <section className="footer">{children}</section>
);

Tab.Header = Header;
Tab.Footer = Footer;

export default Tab;

And use it like this:

<React.Suspense fallback="Loading Tab">
  <Tab>
    <Tab.Header>This is header</Tab.Header>
    <Tab.Footer>This is footer</Tab.Footer>
  </Tab>
</React.Suspense>

Any advice/workarounds for lazy loading components with multiple exports?

[jherr]

Sorry about not getting any attention. Technically, it seems like a limitation of React.lazy and not import() or import though. Your Tab.Header and Tab.Footer trick is really cool and I'm surprised it hasn't worked. Personally I'd run this question by the React folks to see if there is some workaround for React.lazy.

[ScriptedAlchemy]

no react lazy doesn't work like that.

You've gotta do something more complex.

React lazy only returns a component based on export default.

You'd need to provide it differently or make a react helper that attempts to generate something like this. Usually I'll make a RemoteComponent which creates federated imports on demand. In react, it's going to be harder. I'd say create like a context layer that provides an object of the things you want. Or like in that react lazy call you make a custom async function and attach that somewhere else.

You could wrap it in context and tell another special component what to do. But all methods are clunky. What I can suggest is code splitting the parent. Then you can statically import a destructured object then webpack hoist it to the nearest parent dynamic import. So if you can lazy load the parent. You achieve better loading. But still loading code upfront.

Maybe if you did something with the low level api or startup code you could shim the objects.

Ohhh here we go.

Expose an index.js file or whatever. Call it components..... EXPOSE and export your components, then import that components module with a destructured and static import. The file will be empty and just contain an object of react lazy components. That way you import a pre lazy component!! Boom that'll work.

[ScriptedAlchemy]

Since I rambled. To summarize

Take the tab and header js files.
Make a new file called TabModule.js

Inside that
export const Header = React.lazy(..)

And so on, expose this file as a federated module.

Then in the consuming host.
Import {Header} from "remote/TabModule"

[snnsnn]

Thank you for the detailed response.

Since federation is new concept for webpack community, I left the issue open in case you receive similar questions until things are settled but you can close if you like.

[ScriptedAlchemy]

All good. I'll label it as a question. You won't be the last haha. Same concept works for normal modules too. You can export dynamic imports. The you'd destucture promises. With startup code, you could resolve the promise inside webpack runtime

[ScriptedAlchemy]

Also. If you enable top level await. You can destructure code and you don't need to use react lazy. At least this is the case in my NextJS example repo.

[sepinali]

Hi, I don't know if it is the correct place to ask this question or not, but I have this Vue3 application which I'm trying to expose its components via webpack and Module Federation.
I have a component which inside it I'm using two other components. when I run it on my local, it's working fine but when I'm calling it from the second application it only renders the first component and leave those two inner components as is. and not rendering them correctly, any idea how I can resolve this issue?

[jacob-ebey]

const Component = lazy(() => import("my-remote/module").then((mod) => mod.NamedExport));

Nothing special about this... Standard lazy syntax and usage. Would probably help reading up on React.lazy

[alexmorrise]

The suggestion from @jacob-ebey doesn't work for me. But this does:

const Component = lazy(() => import("my-remote/module").then((mod) => ({ default: mod.NamedExport })));