Giter Club home page Giter Club logo

Comments (9)

ScriptedAlchemy avatar ScriptedAlchemy commented on June 22, 2024 3

There's a bug in current release that causes this. I'm working on it.

from universe.

ScriptedAlchemy avatar ScriptedAlchemy commented on June 22, 2024

Upgrade the node plugin to latest

from universe.

MikeVitik avatar MikeVitik commented on June 22, 2024

After upgrade @module-federation/node in remote I still have error in host server:

> [email protected] start
> NEXT_PRIVATE_LOCAL_WEBPACK=true next dev -p 8080

ready - started server on 0.0.0.0:8080, url: http://localhost:8080
No ModuleFederationPlugin(s) found.
event - compiled client and server successfully in 1247 ms (400 modules)
wait  - compiling / (client and server)...
warn  - external "remote@http://localhost:8081/client/remoteEntry.js"
The generated code contains 'async/await' because this module is using "external script".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.
fetching http://localhost:8081/server/remoteEntry.js
remote/Nav offline
remote/Nav offline TypeError: remoteEntryExports.init is not a function
    at Module.get (webpack-internal:///./node_modules/@module-federation/runtime/dist/index.esm.js:277:38)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async FederationHost.loadRemote (webpack-internal:///./node_modules/@module-federation/runtime/dist/index.esm.js:1348:37)
    at async Promise.all (index 3)
remote/Nav offline TypeError: remoteEntryExports.init is not a function
    at Module.get (webpack-internal:///./node_modules/@module-federation/runtime/dist/index.esm.js:277:38)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async FederationHost.loadRemote (webpack-internal:///./node_modules/@module-federation/runtime/dist/index.esm.js:1348:37)
    at async Promise.all (index 3)

from universe.

ScriptedAlchemy avatar ScriptedAlchemy commented on June 22, 2024

update node federation to v2

from universe.

MikeVitik avatar MikeVitik commented on June 22, 2024

With simple component all works, but then I add Counter component which use React.useState I get the following error on the host server:

TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (webpack://nextjs-host-react-remote_remote/./node_modules/react/cjs/react.development.js?:1623:21)
    at Counter (webpack://nextjs-host-react-remote_remote/./src/components/Counter.jsx?:6:68)
    at proxiedFunction (webpack-internal:///./node_modules/@module-federation/nextjs-mf/dist/src/plugins/container/runtimePlugin.js:89:55)
    at renderWithHooks (/Users/mikevitik/code/module-federation/module-federation-examples/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/mikevitik/code/module-federation/module-federation-examples/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/mikevitik/code/module-federation/module-federation-examples/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/mikevitik/code/module-federation/module-federation-examples/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/mikevitik/code/module-federation/module-federation-examples/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/mikevitik/code/module-federation/module-federation-examples/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/mikevitik/code/module-federation/module-federation-examples/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/mikevitik/code/module-federation/module-federation-examples/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/mikevitik/code/module-federation/module-federation-examples/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/mikevitik/code/module-federation/module-federation-examples/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/Users/mikevitik/code/module-federation/module-federation-examples/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/Users/mikevitik/code/module-federation/module-federation-examples/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5) {
  page: '/'
}

Can you look @ScriptedAlchemy?

from universe.

ScriptedAlchemy avatar ScriptedAlchemy commented on June 22, 2024

You're using app router. No app router support.

from universe.

ScriptedAlchemy avatar ScriptedAlchemy commented on June 22, 2024

I'll ship update that prevents compilation entirely if user tries to use app router. Should put an end to all these issues being opened 😜

from universe.

MikeVitik avatar MikeVitik commented on June 22, 2024

No. I don't use app router in my nextjs host application (I copied it from neighboring example). I've updated my example to the last version of node and nextjs module federation packages. After that the error changed to the

HookWebpackError: No code generation entry for runtime host for javascript/dynamic|/...
/react-nextjs/nextjs-host-ssr-react-remote/host/node_modules/
@module-federation/nextjs-mf/dist/src/federation-noop.js (existing runtimes: host+webpack)

Can you explain: Is it working scenario to using @module-federation/nextjs-mf in the host and @module-federation/node from webpack in the remote with own (not shared) react version?

See also for more details: module-federation/module-federation-examples#3067

from universe.

duannx avatar duannx commented on June 22, 2024

Hi @ScriptedAlchemy, can we re-open this issue? I tested on the latest version of next-mf @module-federation/[email protected] and got the same error remoteEntryExports.init is not a function

I'm trying to import the component from a Next application to another Next application. The mf node module is already on v2 @module-federation/[email protected]

from universe.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.