Comments (3)
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.
Dont use next/dynamic, use react lazy
from module-federation-examples.
Related Issues (20)
- Code Nextjs-v14 throws error when try to run HOT 5
- [Feature request/discussion] Allow having multiple instances of shared dependencies HOT 3
- Hot Module Reloading is solved! HOT 1
- [Question] Shared modules are duplicate in multi-bundle files of MF v8.2.2 above HOT 14
- Can I Remove remote.js?[hash] for cache remote.js HOT 2
- NPM package unavailable - nextjs-shared-v14 HOT 1
- [Bug][Nextjs13] Uncaught TypeError: Cannot read properties of undefined (reading 'consumes') HOT 2
- Examples issue HOT 3
- vue-cli master分支跑不起来 HOT 1
- [Question] URL parameters? HOT 6
- externals @module-federation/webpack-bundler-runtime no work HOT 1
- Dynamic-remotes shared config not work HOT 2
- Does V2 currently support Vite? HOT 1
- Microfe
- nextjs mf does not generate remoteEntry.js HOT 6
- Add ability to reduce requests waterfall for host-ui HOT 3
- [Help] Router Module forRoot Issue with Module Federation HOT 1
- css-Isolation not working in rspack example HOT 2
- Does it work with the Next 14 App router? HOT 2
- vite-react-microfrontends example is broken
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.