Comments (9)
There's a bug in current release that causes this. I'm working on it.
from universe.
Upgrade the node plugin to latest
from universe.
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.
update node federation to v2
from universe.
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.
You're using app router. No app router support.
from universe.
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.
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.
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)
- Getting 500 (Internal Sever Error) with NextJS API route when fired from browser right after server is started in production bundle HOT 7
- @module-federation v2 runtime plugin - beforePreloadRemote args wrongly typed HOT 5
- @module-federation v2 runtime plugin - remoteEntry import HOT 5
- Duplicate network request for same chunk in MF-V2 HOT 12
- RemoteEntry file size increased by ~7x HOT 8
- Hot reload not working on exposed files HOT 7
- Non-deterministic sourcemaps generated by Module Federation V2 HOT 4
- @module-federation/runtime init method not executing as expected HOT 9
- @module-federation/runtime loadRemote - Cannot define property Symbol(mf_module_id) HOT 5
- When modifying files (occasionally) or rsbuild.config.ts (must be), the generated product has problems HOT 2
- file not found error HOT 1
- Optimizing the problem of overly long identifiers of the container entry module of the issuerPath in the stats.json file HOT 2
- @module-federation/native-federation-typescript - support destination folder, loadRemote typings and other improvements HOT 7
- Type file missing when using vue-tsc
- remote component error in react when this version different HOT 5
- Add documentation / example for including module federation runtime via CDN in browser script tag HOT 4
- Module Federation not working with Content Security Policy (CSP) HOT 9
- getPublicPath or publicPath is not part of ModuleFederationPluginOptions HOT 4
- @mf-types. expose typings for shared modules HOT 1
- Infer shared modules based from the host's manifest file. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from universe.