originjs / vite-plugin-federation

Module Federation for vite & rollup
Other
2.29k stars 236 forks source link

TypeError: lib.init is not a function #396

Open mostafa-raafat opened 1 year ago

mostafa-raafat commented 1 year ago

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

Screenshot 2023-04-08 at 17 37 54 Screenshot 2023-04-08 at 17 37 39

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

Screenshot 2023-04-08 at 17 33 22

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

Screenshot 2023-04-08 at 17 33 03
mostafa-raafat commented 1 year ago

@ruleeeer Could you help me with this issue?

baijunjie commented 1 year ago

Same problem with vite

MatheusKindrazki commented 1 year ago

I have the same problem 😢

mjangir commented 1 year ago

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

mostafa-raafat commented 1 year ago

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

theart84 commented 1 year ago

This configuration:

image

Still defines it as esm:

image
mostafa-raafat commented 1 year ago

@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 commented 1 year ago

@mostafa-raafat

image

He stubbornly sets these parameters.

theart84 commented 1 year ago
image

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

image

Then everything will be determined correctly

mjangir commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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

// webpack.config.js
// ...
optimization: {
  // ...
  runtimeChunk: 'single'
}
zhoutaoqq commented 1 year ago

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

erkanisuf commented 1 year ago

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

mostafa-raafat commented 1 year ago

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

terence-g-20230331 commented 1 year ago

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 commented 1 year ago

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 https://github.com/originjs/vite-plugin-federation/pull/480

Webpack configurations

Screenshot 2023-08-15 at 00 22 32 Screenshot 2023-08-15 at 00 22 44

Vite configurations

Screenshot 2023-08-15 at 00 22 17
hendry91 commented 1 year ago

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 image

next.config.js image

image

mostafa-raafat commented 1 year ago

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

hendry91 commented 1 year ago

@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. image

lowhan28 commented 1 year ago

Hi @mostafa-raafat, may I ask any solution for https://github.com/originjs/vite-plugin-federation/issues/396#issuecomment-1686558061 ? cause I also face same issue. Really appreciate can share some solutions. Thanks

imycod commented 11 months ago

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 commented 11 months ago

image image image

imycod commented 11 months ago

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 commented 11 months ago

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 Screenshot 2023-08-15 at 00 22 32 Screenshot 2023-08-15 at 00 22 44

Vite configurations Screenshot 2023-08-15 at 00 22 17

if add manualChunks options,what happen

cp-sumi-k commented 11 months ago

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

Nuxt.config.js

Screenshot from 2023-10-12 11-09-23

Next.config.js

Screenshot from 2023-10-12 11-10-10

Here is error Screenshot from 2023-10-12 11-11-07

Nothing has been worked

laocker96 commented 11 months ago

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

This is my conf (not working)

Remote config (NextJS) image

Host config (Vite + React) image

pank-j commented 11 months ago

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

Screenshot 2023-11-02 at 10 50 04

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

Screenshot 2023-11-02 at 10 53 38

Vite.Config =>

Screenshot 2023-11-02 at 10 51 35

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

Screenshot 2023-11-02 at 10 54 48
damtzi commented 10 months ago

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 commented 6 months ago

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 commented 3 months ago

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 commented 2 months ago

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 Screenshot 2023-08-15 at 00 22 32 Screenshot 2023-08-15 at 00 22 44

Vite configurations Screenshot 2023-08-15 at 00 22 17

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

arnanta commented 2 months ago

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