Comments (2)
I think this must be an old example. What are you looking for in the example?
if you want non UI module, it should work the same, just import the utility and use it without react lazy etc?
from module-federation-examples.
what i'd like to achieve is that on top of react/nextjs components, we have hooks, API handlers, basic general-use functions etc. in our projects to share with module federation. the closest concept i could find to do that was sharing non-UI modules.
in the react-nextjs/nextjs-host-remote
example, i created a function that just console.log
s a text and added it to NextFederationPlugin
config in react-nextjs/nextjs-host-remote/remote/next.config.js
. here's the plugin config after this change:
new NextFederationPlugin({
name: 'remote',
exposes: {
'./nextjs-remote-component': './components/nextjs-remote-component.js',
'./basic-function': './helpers/basic-function.js', // only this line is added, the rest is from the example
},
shared: {},
filename: 'static/chunks/remoteEntry.js',
})
Here's the example function i wanted to share with module federation, defined in newly-created react-nextjs/nextjs-host-remote/remote/helpers/basic-function.js
file:
export default () => console.log('console log from federated function')
below is how i tried to use it in the host
project next to remote
in the same example, inside react-nextjs/nextjs-host-remote/host/pages/index.js
:
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import dynamic from 'next/dynamic';
// import basicFunction from 'remote/basic-function';
const basicFunction = import('remote/basic-function'); // tried the `import` above too, got the same error in the screenshot below
const NextjsRemoteComponent = dynamic(() => import('remote/nextjs-remote-component'), {
ssr: false,
});
export default function Home() {
basicFunction();
return <></>;
}
i deleted most of the html in the return
statement, since it's not required in the setup i want to achieve.
here's the screenshot of the error i get in the host
app when i visit the page:
i don't know what's missing in this configuration. i didn't touch rest of the files, only auto-generated package-lock.json
files.
how can i achieve sharing a non-UI module in this configuration?
from module-federation-examples.
Related Issues (20)
- How to share data between micro frontends dynamically using services ? HOT 1
- Remote is not defined in nextjs-mf v8 HOT 1
- Next14 Host / React Remote - Prod Eager Consumption Error On Load HOT 1
- how do i share types? HOT 1
- federated store example fails HOT 7
- esm modules possible? HOT 1
- nested paths, optimizations and bundle size effects on shared vendor HOT 1
- XSS and consideration in regard of module federation HOT 1
- trying to mix ModuleFederationPlugin doesnt work as expected HOT 1
- circular dependency on federated router HOT 1
- no vite-side remoteEntry.js HOT 3
- rspack-webpack-offload no work! HOT 2
- 404 pages are rendered in federated URLs in nextjs v13 with nextjs-mf v8. HOT 2
- issue with makeSerializable HOT 12
- Child Applications are re-rendering and the states are getting reset when the apllications are loaded using the concept of Dynamic Remote Containers HOT 1
- App router support HOT 7
- NEXT_PRIVATE_LOCAL_WEBPACK HOT 10
- Invalid hook call. Hooks can only be called inside of the body of a function component. HOT 1
- Remote is online but error log says offline HOT 1
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 module-federation-examples.