Uncaught Error: Cannot find module 'path' about module-federation-examples HOT 23 CLOSED

check the shared config, automatic vendor federation plugin Is likely consuming too much code. which example is this?

from module-federation-examples.

check the shared config, automatic vendor federation plugin Is likely consuming too much code. which example is this?

example:https://github.com/module-federation/module-federation-examples/tree/master/dynamic-system-host
app2 add test code.

from module-federation-examples.

`dynamic-system-host/app2/src/Widget.js

import React, { useState } from "react";

export default function Widget() {
const [loading, setLoading] = useState(false);
return (
<div
style={{
borderRadius: "4px",
padding: "2em",
backgroundColor: "red",
color: "white",
}}
>
<button onClick={() => setLoading(true)}>click
{loading &&

is loading?

App 2 Widget

from module-federation-examples.

这个例子本身就有问题。 🤣
=>
这个例子在 hooks 场景下本身就有问题。

from module-federation-examples.

It looks like where you are requiring from is too dynamic so require(variable) won’t work. Since it’s browser bundle. Webpack will import the entire codebase

That’s what it looks like. Somewhere there’s an import or require that’s too loose

from module-federation-examples.

i am running it right now with no problem

from module-federation-examples.

not sure the command you are executing, but it looks like you have livereload in there which most likely will cause all kinds of problems
lerna run --scope @dynamic-system-host/* --parallel start

from module-federation-examples.

cd dynamic-system-host && yarn start

from module-federation-examples.

thanks for your quick response. what problem i face is 'invlid react hooks'. original source code is ok. i means that when use react hooks in widget will cause problem.

from module-federation-examples.

it is most likely because you run webpack-dev-server.
otehr than that, is react shared in all repos?

from module-federation-examples.

ohhhh

from module-federation-examples.

okay i know whats wrong. You're using dynamic code, but shared doesn't work with this syntax. The parser is unable to know whats going to happen and cannot create a remoteModule which performs overrides

from module-federation-examples.

React is not shared is the key.

after widget loaded, found widget loaded react by itself.

from module-federation-examples.

you have to do somthing like this. Pretty much part of my webpack 4 shim.
Im working on an easier way to access hosts overrides and pass them easily to the remotes but without import() we don't know what is going to happen.
So how it works is when you import(app1/thing)
webpack parser looks for any request that startsWith the name of remote - then once it finds it - we know both the scope and module (app1,thing) and actually perform the overrides during import() because nowhere else does webpack know what you are doing, so we cannot set it up automatically - you are not sharing vendors

if (window?[scope]?.override) {
    window.[scope].override(
        Object.assign(
            {
                react: () => {
                    return Promise.resolve().then(() => {
                        // eslint-disable-next-line
                        return () => require("react");
                    });
                },
                "react-dom": () => {
                    return Promise.resolve().then(() => {
                        // eslint-disable-next-line
                        return () => require("react-dom");
                    });
                },
                "next/link": () => {
                    return Promise.resolve().then(() => {
                        // eslint-disable-next-line
                        return () => require("next/link");
                    });
                }
            },
            __webpack_require__.O
        )
    );
}

from module-federation-examples.

or whatever you are passing
it can also be import() not require lol, if you wnt

from module-federation-examples.

lol, i stared your wp4 shim few days ago, cool thing.

Thanks for your patience.

from module-federation-examples.

Actually, i think this problem is react's drawback.

at some cases， we wouldn't share react.

some module (e.g. components) require lower version react (16.13.0), but host app require 16.x.0 (this version may break change) . We must update the react version 😇.

this case is very common in a huge micro frontend app.

from module-federation-examples.

----- 这个例子本身就有问题。 🤣 ------

=>

这个例子在hooks下本身就有问题

嗯就是用官方的这个例子，发现有这个问题，最终我们需要如何解决这种问题

from module-federation-examples.

这个例子本身就有问题。 🤣
=>
这个例子在hooks下本身就有问题

嗯就是用官方的这个例子，发现有这个问题，最终我们需要如何解决这种问题

在统一 react 版本的前提下，你可以不用例子中的这种方式。把这个 widget 改成 本地 private repo，加入 workspace package，再通过 federation shared 这个包。项目中则直接 import 这个包，就不会有 invalid react hook 的问题啦。

from module-federation-examples.

这个例子本身就有问题。 🤣
=>
这个例子在hooks下本身就有问题

嗯就是用官方的这个例子，发现有这个问题，最终我们需要如何解决这种问题

在统一 react 版本的前提下，你可以不用例子中的这种方式。把这个 widget 改成 本地 private repo，加入 workspace package，再通过 federation shared 这个包。项目中则直接 import 这个包，就不会有 invalid react hook 的问题啦。

app1 app2 app3 app4
如果app2 挂了，按现在的情况在app1 中的其他也都挂了，期望不影响其他的，有好的建议吗

from module-federation-examples.

Watch this video. It uses dynamic Federation which is what you’re trying to do. It uses the overrides system. https://twitter.com/jherr/status/1263887824203341832?s=21

from module-federation-examples.

Oh. Well. You pretty much have no choice under that condition. Otherwise you need to not pass components but actually mount new apps that have their own react version.

React is a hard limit. Webpack cannot change the rules of the library :/ cant you update the components or force them to use the host version with newer api? You can use ContainerPlugin and ContainerReferenctPlugin to enforce one direction sharing

from module-federation-examples.

fixed

from module-federation-examples.