TypeError: lib.init is not a function

[mostafa-raafat]

Just trying to load a webpack remote That I'm sure 100% it work as i use it in other webpack projects.

As you can see it load with 200 so the url itself is correct

Versions
originjs: ^1.2.1
node: 15.14.0

And this is a child vite.config.js I tried to use 'var' | 'esm' | 'systemjs' but all of them return same error

What is Expected?
to display the remote entry in my parent component

What is actually happening?
nothing loads and throws lib.init is not a function error

[mostafa-raafat]

@ruleeeer Could you help me with this issue?

[baijunjie]

Same problem with vite

[MatheusKindrazki]

I have the same problem 😢

[mjangir]

I got it fixed. Add format: 'var' also in the remote configuration.

[mostafa-raafat]

@mjangir could you share your webpack.config file please?

[theart84]

This configuration:

Still defines it as esm:

[mostafa-raafat]

@theart84 I think @mjangir meant to update your webpack.config by adding remoteType: 'var' I didn't try it yet but will try it today night and will let you know if it work.

[theart84]

@mostafa-raafat

He stubbornly sets these parameters.

[theart84]

I think I got it, I need to write the settings like this.

Then everything will be determined correctly

[mjangir]

@mjangir could you share your webpack.config file please?

Our remote app is a CRA application with CRACO module federation config which produces a webpack library output.

[lokingdav]

I am facing the same issues. In my case I am setting up react.js + typescript + vite project as parent to use the remote project which uses webpack and vue.js. I tried everything in this thread however I still face the same issue.

[clxx]

Do you use this? It causes such an error as well:

// webpack.config.js
// ...
optimization: {
  // ...
  runtimeChunk: 'single'
}

[zhoutaoqq]

I get the same issue, can anyone provide any suggestions?

[erkanisuf]

I am having same issue with Vite Host and React Webpack remote.

[mostafa-raafat]

@ruleeeer Do you have any updates about this issue as it's really critical?

[terence-g-20230331]

having the same issue that trying to use a webpack remote module from vite host, and keep seeing this :

lib.init is not a function
TypeError: lib.init is not a function
    at http://localhost:5174/@id/__x00__virtual:__federation__:53:19

Really appreciate if anyone can share a working case with the configs, solutions or best practices.

[mostafa-raafat]

Hello everyone I have a good news today. I was able to create a working demo Remote => webpack and Host => Vite
Both configuration should use esm as output format. Link for the PR #480

Webpack configurations

Vite configurations

[hendry91]

Hi @mostafa-raafat I'm new to the federation and I having the same issue when using the nextjs, do you have any idea how to fix this? Thanks.

vite.config.js

next.config.js

[mostafa-raafat]

Hi @hendry91 did you update vite configuration build output format to esm?

[hendry91]

@mostafa-raafat Thank for you reply, I've added the build: { target: 'esnext', rollupOptions: { output: { format: 'esm' } } }, but it doesn't work, still getting the same error.

[lowhan28]

Hi @mostafa-raafat, may I ask any solution for #396 (comment) ? cause I also face same issue. Really appreciate can share some solutions. Thanks

[imycod]

I'm not sure why, but I did indeed resolve this issue. It might be related to the shared and manualChunks configurations. In two new Vite Vue projects, when I configured manualChunks and shared for the remote module, Vue was bundled into a new file with a different name, and the host could use it. However, in an existing online project, I encountered a lib.init problem when I configured shared along with `manualChunks.

[imycod]

[imycod]

Hi @mostafa-raafat, may I ask any solution for #396 (comment) ? cause I also face same issue. Really appreciate can share some solutions. Thanks

try manualChunks shared

[imycod]

Hello everyone I have a good news today. I was able to create a working demo Remote => webpack and Host => Vite Both configuration should use esm as output format. Link for the PR #480

Webpack configurations

Vite configurations

if add manualChunks options，what happen

[cp-sumi-k]

I am working with Nuxt.js(Host) -> vite and Next.js(remote) -> webpack, facing the same issue.

Nuxt.config.js

Next.config.js

Here is error

Nothing has been worked

[laocker96]

Any solution so far? I'm stuck with Vite + React Host and NextJS as Remote

This is my conf (not working)

Remote config (NextJS)

Host config (Vite + React)

[pank-j]

Any updates or progress on this? I am facing a similar issue. I have Nuxt(remote) and Vue3/ VIte(host).
Nuxt.config =>

After build, this is how my remoteEntry.js looks like:

Vite.Config =>

.. and just like others, I am constantly being troubled by this message:

[damtzi]

Hello, are there any updates on this? Have the same error Uncaught TypeError: lib.init is not a function using a next js app as remote and react+vite app as host.

[ChenReuven]

is there any update? still have the same issue

Host = Vite
Remote = Webpack (Craco) and also i try regular webpack and it dosnt work.

i try to understand is it "safe" to take this plugin to work with remote Webpack, cause currently AFAIS there is no solution for that :(

Thanks 4 your effort

[azhargraha]

any update on this? still facing the same error Uncaught TypeError: lib.init is not a function
i'm using Nuxt.js (Vite) as host and Next.js (Webpack) as remote.

[arnanta]

Hello everyone I have a good news today. I was able to create a working demo Remote => webpack and Host => Vite Both configuration should use esm as output format. Link for the PR #480

Webpack configurations

Vite configurations

@mostafa-raafat Can you please share the configs of both the remote and host?

[arnanta]

I am stuck still. Using Webpack in the remote and vite in host. It keeps on saying lib.init is not a function. Tried all the means @mostafa-raafat

[S-unya]

FWIW, for a vite application loading webpack federated modules, there were a few things that had to be in place for me to load them successfully:

HOST:

• there was nothing special necessary beyond the base example in the root readme of this repo, e.g. you need to use the from: "webpack" setting in remotes

REMOTE:

• As above, ensure libraryTarget: 'module', setting is in your output
• And to support this, you will need the experiments: {outputModule: true}, in the base webpack config
• Also library: { type: 'module' }, needs to go in the modulefederation plugin settings, at the same level as name
• Finally, I found, the most robust setting for the shared components was to provide import: false and to make sure that version was set.

Hope that helps

[GabrielBursi]

FWIW, for a vite application loading webpack federated modules, there were a few things that had to be in place for me to load them successfully:

HOST:

• there was nothing special necessary beyond the base example in the root readme of this repo, e.g. you need to use the from: "webpack" setting in remotes

REMOTE:

• As above, ensure libraryTarget: 'module', setting is in your output
• And to support this, you will need the experiments: {outputModule: true}, in the base webpack config
• Also library: { type: 'module' }, needs to go in the modulefederation plugin settings, at the same level as name
• Finally, I found, the most robust setting for the shared components was to provide import: false and to make sure that version was set.

Hope that helps

it have worked for me, thanks !

[arolonger]

@GabrielBursi could you share full vite and webpack config? Thanks in advance

[GabrielBursi]

@GabrielBursi could you share full vite and webpack config? Thanks in advance

remote (webpack)

host (vite)