Nextjs-mf Paid Package Support #978
Replies: 65 comments 142 replies
-
|
Hi, Thanks for all the work you've done on Module Federation, it's been very exciting to follow along with all the progress that has been made in recent months. I've been frustrated by the lack of options that NextJS provides for creating micro-frontends, and its great to see that Module Federation offers solutions for this. I've been playing around with the The repo is here: https://github.com/JohnDaly/nextjs-mf-issues, and it also has some videos that demonstrate the issue in the README. Thanks |
Beta Was this translation helpful? Give feedback.
-
|
I managed to fix the problems (fixes for my example repo: https://github.com/JohnDaly/nextjs-mf-issues/pull/1/files). There were two main issues with my code:
Before: const RemoteTitle = dynamic(() => import('checkout/title'), { ssr: false });After: const RemoteTitle = dynamic(() => window.checkout?.get("./title").then((factory) => factory()), { ssr: false });The README for |
Beta Was this translation helpful? Give feedback.
-
|
Yeah theres a bug in Next.js where it attempts to do some optimization step only in the index.js file, so if you use federated imports in something thats imported into index.js, you need to use the low level api - super annoying and I've already logged a bug with vercel about this. Usually resolve.alias = {checkout: false} works, but it seems not to in the case of index.js :/ I'd suggest sticking with the low level api to avoid any possible issues |
Beta Was this translation helpful? Give feedback.
-
Hi, John I'm a bit stuck with this statement, I'm currently using typescript and I can't get rid of an error inside of the Did you ever implemented with typescript ? |
Beta Was this translation helpful? Give feedback.
-
|
I didn't see this dedicated space, so I started an issue here -> #1066 |
Beta Was this translation helpful? Give feedback.
-
|
Yeah that's super strange, is the shared package named correctly and matches what's being expected in the package json? Is shared folder listed on the workspaces array? |
Beta Was this translation helpful? Give feedback.
-
|
Hello, Anyone has the following error when do refresh page in route /checkout from home app? Well, I'm getting the following error
|
Beta Was this translation helpful? Give feedback.
-
|
do some debugging and see what in the catch-all is failing, I'm not able to reproduce this. Are you using nextjs-mf@v3 |
Beta Was this translation helpful? Give feedback.
-
|
Checkout api was dead, so i fixed that - demo is running as expected on all pages |
Beta Was this translation helpful? Give feedback.
-
|
After update the library i got the same error, but i found the error. in the file index.js of share package, you use the chaining operator const remote = matchedPage?.value?.remote;
const mod = matchedPage?.value?.module;this provoke the above error. I removed that and it work like a charm. const remote = matchedPage.value.remote;
const mod = matchedPage.value.module;I'm using the [email protected]. This share package, you have in mind to convert it in standard library? Thanks |
Beta Was this translation helpful? Give feedback.
-
|
I will once I've hardened it up. We have private repos with far more robust implementations, SSR, sentry error handling and multiple dsn support. The OSS code serves as a simple example. Will package it up in the near future |
Beta Was this translation helpful? Give feedback.
-
|
Issue in. optional chaining. after Installing [email protected] fixed the issue. |
Beta Was this translation helpful? Give feedback.
-
|
I created a sample repo here: lednhatkhanh/next-mf-example to describe my problems, I don't know what I'm doing wrong here 😢. Currently, I have 2 problems with module federation:
If you have time, could you please help me check this, I have absolute no ideas about what I'm wrong here. |
Beta Was this translation helpful? Give feedback.
-
|
Its because youre using high-level imports somewhere instead of the low level window.get API, the build fails. 4 | const Header = dynamic(
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you, it's working fine for me now. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry for the inconvenience, have you seen the following error after build (next builld) shell and microapp (checkout) and serve with start command, I'm getting an error
any help? |
Beta Was this translation helpful? Give feedback.
-
|
Confirmed, This error is present with next@^10.2.3, with next@^11.0.0 work like a charm. anyone have this error? |
Beta Was this translation helpful? Give feedback.
-
|
Hello! Thank you for the work for the amazing library Btw, Is there a way I can use getServerSideProps instead of getInitialProps on the SSR page? (note)
It seems like I cannot use the getServerSideProps if I use the |
Beta Was this translation helpful? Give feedback.
-
|
Youd have to have a way to independently call the data, since get server-side props doesnt run client side, there's no way to get the data at runtime required for the page to hydrate. |
Beta Was this translation helpful? Give feedback.
-
|
Hello! love this library, thanks for your work on this! Would it be possible to add next/router to shared internals? I was able to get this working with my app by adding to the library code: to to another (very small) thing that would be nice- I had a typo in the file path in Thanks again! |
Beta Was this translation helpful? Give feedback.
-
|
yeah i saw this recently, will update it |
Beta Was this translation helpful? Give feedback.
-
|
Released to the package registry |
Beta Was this translation helpful? Give feedback.
-
|
How i can add publicRunTimeConfig or env vars in the MF? any ideas? Thanks |
Beta Was this translation helpful? Give feedback.
-
|
You could use definePlugin since we copy over the plugins used on a build. Do you have an example of what you're looking for? |
Beta Was this translation helpful? Give feedback.
-
|
I am having a similar issue. I use publicRuntimeConfig to set environment variables at runtime, not build time. It seems that publicRuntimeConfig is undefined on modules imported from MF. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
I'm trying to set up a NextJS shell application that includes an Apollo Client provider, which can be accessed via Apollo's data fetching hooks (e.g. The error that I'm seeing when I try and run the app is: The line that's causing the error is the Apollo Client import: This is the general set up (simplified for readability) is: _app.tsx import NextApp from 'next/app';
import { ApolloClient, ApolloProvider } from '@apollo/client';
const withApollo = (app) => {
const client = new ApolloClient(...);
return (
<ApolloProvider client={client}>
{app}
</ApolloProvider>
)
}
export default withApollo(NextApp);The module.exports = phase => ({
webpack(config, { isServer, webpack }) {
config.experiments = { topLevelAwait: true };
config.output.publicPath = 'auto';
if (isServer) {
// Ignore federated modules when doing SSR
Object.assign(config.resolve.alias, {
dashboard: false,
});
} else {
config.plugins.push(
new webpack.container.ModuleFederationPlugin({
remoteType: 'var',
remotes: {
dashboard: 'dashboard',
},
shared: {
// we have to share something to ensure share scope is initialized
'@module-federation/nextjs-mf/lib/noop': {
eager: false,
},
react: {
singleton: true,
eager: true,
requiredVersion: false,
},
'@apollo/client': {
singleton: true,
eager: true,
version: '3.3.19',
requiredVersion: '3.3.19',
},
},
}),
);
}
config.module.rules.push({
test: /_app.tsx/,
loader: '@module-federation/nextjs-mf/lib/federation-loader.js',
});
return config;
},
});I assume this issue has something to do with the shared scope not getting initialized by the time the Apollo import is happening in |
Beta Was this translation helpful? Give feedback.
-
|
Hi, have you found a fix to this yet @JohnDaly . I am getting a similar issue. |
Beta Was this translation helpful? Give feedback.
-
|
Apollo is tricky. You need to share more of the Apollo packages like Apollo core |
Beta Was this translation helpful? Give feedback.
-
|
Also you might be missing the context wrapper by putting it on app.js since that's a seperate entry point federation won't see it |
Beta Was this translation helpful? Give feedback.
-
|
@ScriptedAlchemy Sorry to bother you again but I really need your help, you can checkout the problem here: lednhatkhanh/next-mf-example. The problem is, when I dynamically importing a json file and also expose it to another app:
Then when I navigate around the app using the Link component (You can click About link on the header), I will get this error. Reload the page and it will work again. This is only happening in development and working fine in production, must be something related to Next.js.
|
Beta Was this translation helpful? Give feedback.
-
|
For you to know the usecase of this, we are dynamically importing i18n json files to load language based on current locale. |
Beta Was this translation helpful? Give feedback.
-
|
Exposed modules use a different webpack build, they are unable to interfere with next.js and its build. If imports are failing, its not caused by nextjs-mf since we use a sidecar to isolate exposed modules separately from the next build itself |
Beta Was this translation helpful? Give feedback.
-
|
@ScriptedAlchemy So if my understanding is correct then we need to fix this on Next.js side right? |
Beta Was this translation helpful? Give feedback.
-
|
@ScriptedAlchemy I found temporary the solution for this problem, I need to share all json files from ...withFederatedSidecar({
...
shared: {
react: {
// Notice shared are NOT eager here.
requiredVersion: false,
singleton: true,
},
["./src/test.json"]: {
singleton: false,
},
["./src/test1.json"]: {
singleton: false,
},
},
...
config.plugins.push({
shared: {
"@module-federation/nextjs-mf/lib/noop": {
eager: false,
},
react: {
singleton: true,
eager: true,
requiredVersion: false,
},
["./src/test.json"]: {
singleton: false,
},
["./src/test1.json"]: {
singleton: false,
},
},Even though I only expose Don't know if this is the correct fix or not, but it's working for me now. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah that'll work |
Beta Was this translation helpful? Give feedback.
-
|
Hi there, I just purchased this and it looks awesome! I just have a question regarding server side rendering, I saw you mention in the README that it only supports client side rendering but I was wondering if there was any way to get this to work with SSR or any plan to support in the future please? If not would it be possible to have a quick explanation of why just for my understanding ;-) Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
We have SSR working. We just don't sell it as a package, only through a workshop which gives you access to the source. It took months to solve, so it sells at a premium. |
Beta Was this translation helpful? Give feedback.
-
|
Update. I've written a SSR plugin that just gone into closed beta testing |
Beta Was this translation helpful? Give feedback.
-
|
Is there a recommended approach for global CSS imports that are usually loaded into I have a few dependencies that require importing their CSS as in One option I consider is to overwrite the Thoughts? |
Beta Was this translation helpful? Give feedback.
-
|
Overriding the loader worked. Injected my MF exposed entries as a valid |
Beta Was this translation helpful? Give feedback.
-
|
Yep exactly what I've done ✅ you should be able to just loop over Config and find the one loader. Then mutate it. No need to fork the whole file. Mine is just a few lines |
Beta Was this translation helpful? Give feedback.
-
|
yes, that's what I came up with: /**
* Adds additional supported files that can import global CSS without failing in Next.js
* Next.js does not allow global css imports in components, see https://nextjs.org/docs/messages/css-global
* Module Federation entries need to import the same global CSS that pages/_app.tsx imports
*
* Usage:
* ```js
* withGlobalCSSIssuers([/components\/global-css\.tsx/]),
* ```
*
* @param {(string | RegExp)[]} allowedIssuers
* @returns {(nextConfig: import('next').NextConfig) => import('next').NextConfig}
*/
const withGlobalCSSIssuers = (allowedIssuers) => (nextConfig) => {
return {
...nextConfig,
/**
* @param {import('webpack').Configuration} config
* @param {*} options
* @returns {import('webpack').Configuration}
*/
webpack(config, options) {
const cssRule = config.module.rules.find((rule) => rule.oneOf?.[0]?.options?.__next_css_remove);
const issuerHasNextApp = (node) => {
if (!node) return false;
if (node instanceof RegExp) return node.source.includes?.('_app');
if (Array.isArray(node)) return node.some((n) => issuerHasNextApp(n));
if (node.or || node.and) return issuerHasNextApp(node.or || node.and);
return false;
};
/** @type {import('webpack').RuleSetRule[]} */
const nextAppRules = cssRule.oneOf.filter((r) => issuerHasNextApp(r.issuer));
/**
* @param {import('webpack').RuleSetRule} rule
*/
const addEntryToNextAppRuleIssuer = (rule) => {
if (typeof rule.issuer !== 'object') return;
if (rule.issuer.or) {
rule.issuer.or.push(...allowedIssuers);
}
if (rule.issuer.and) {
rule.issuer = {
or: [rule.issuer.and, ...allowedIssuers],
};
}
};
nextAppRules.forEach((rule) => {
addEntryToNextAppRuleIssuer(rule);
});
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, options);
}
return config;
},
};
};
module.exports = {
withGlobalCSSIssuers,
};and my next.config.js has withGlobalCSSIssuers([/components\/global-css\.tsx/])now both my import '../components/global-css';with no issues. |
Beta Was this translation helpful? Give feedback.
-
|
there we are! |
Beta Was this translation helpful? Give feedback.
-
|
Okay for the error loader I can disable that in the sub build. Also might be worth seeing if you can expose the css via federated module. Then just import /globalCSS Does the sidecar throw an error or just the main next app? |
Beta Was this translation helpful? Give feedback.
-
|
I'm seeing an issue when trying to get a module that is both in the remote app and also exposed in the sidecar.
Starting the app creates However, in the original remote app, when running it independently, I see errors about missing chunks: However, accessing If I remove the sidecar, the remote app starts working again. If I strip I understand this is very vague and can be a result of many things, but any pointers on what can cause this? |
Beta Was this translation helpful? Give feedback.
-
|
Ive seen this before, whats happening most likely is the sidecar is emitting a chunkfileName that's the exact same. Im betting you the beginning of the file doesn't start / push into something like webpackChunkN_E but instead has the remotes name. I ran across this issue with translations where chunks are named. I did update the plugin the other day, pretty sure I addressed this issue. Do you have latest? |
Beta Was this translation helpful? Give feedback.
-
|
Just upgraded, the new version works! ❤️ |
Beta Was this translation helpful? Give feedback.
-
|
Excellent news! |
Beta Was this translation helpful? Give feedback.
-
|
Hi, first of all thanks for all the work you have done on module federation. I purchased your @module-federation/nextjs-mf package and tried to get a simple example going. Sadly I could not manage to get it working properly. I pretty much followed all your instructions but the exposed component just wont show within the consumer app. Any idea where i went wrong? Your help is much appreciated. Best regards, Mike I reproduced my issue in this repo |
Beta Was this translation helpful? Give feedback.
-
|
Edit: When i write the dynamic import within consumer-app like this : I get the following warning: I wonder if that might be a part of my problem? |
Beta Was this translation helpful? Give feedback.
-
|
You're using the import syntax. You have to use the low level api as stated in the readme. I'd start there |
Beta Was this translation helpful? Give feedback.
-
|
Okay, I changed it back to low level api like so: the warning disappears but still the exposed component does not render. |
Beta Was this translation helpful? Give feedback.
-
|
I managed to fix my problem! |
Beta Was this translation helpful? Give feedback.
-
|
Yeah this has snagged a few users. Loader test needs to match your _app extension or path |
Beta Was this translation helpful? Give feedback.
-
|
Hot reloading issue: My exposed entry is Additionally: I noticed that we hook into |
Beta Was this translation helpful? Give feedback.
-
|
Watch has been problematic when I've tried to implement, but if you have solved it I'd be happy to release an update |
Beta Was this translation helpful? Give feedback.
-
|
Is hot reloading currently a feature? Not sure if it should be happening or not. |
Beta Was this translation helpful? Give feedback.
-
|
@ScriptedAlchemy Hello. |
Beta Was this translation helpful? Give feedback.
-
|
yeah, I supposed so as well, thank you, will try to add it manually |
Beta Was this translation helpful? Give feedback.
-
|
it worked! but now when I click on a Link then I get this: |
Beta Was this translation helpful? Give feedback.
-
|
I guess I have the same test setup (create react app host and mixed remotes by nextJS and CRA) and same errors. |
Beta Was this translation helpful? Give feedback.
-
|
yeah you'd want to "share" next/link as react-router-link in a non next host or something like that, so that when called, it uses the right link, similar to an alias, then you can use adapter like pattern to translate the link props to a non-next router |
Beta Was this translation helpful? Give feedback.
-
|
Hi @ScriptedAlchemy Do you have an example on how this adapter would be implemented? Have opened a new discussion here: module-federation/core#494 |
Beta Was this translation helpful? Give feedback.
-
|
Does this module support production applications? |
Beta Was this translation helpful? Give feedback.
-
It's the same as the commercial package. Been in production At hundreds of companies for well over a year. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I'm following the example on the readme and I keep getting an error when trying to run the app, this is my next.config.js: and this is the error I keep getting: If I remove I'm using NextJS 11.0.1 Thanks in advance. |
Beta Was this translation helpful? Give feedback.
-
|
Plugin might not work with next 11 (latest versions) try installing webpack latest using yarn resolutions. Bundled copy of webpack next comes with might be too old |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @ScriptedAlchemy it was definitely the nextJS version, I upgraded to 12 and it worked right away. Were they moved somewhere else? |
Beta Was this translation helpful? Give feedback.
-
|
When there will be a free version of this package ? |
Beta Was this translation helpful? Give feedback.
-
|
Already released on npm... |
Beta Was this translation helpful? Give feedback.
-
|
Thanks :))
…On Wed, Oct 5, 2022 at 12:49 PM matthintosh ***@***.***> wrote:
Already released on npm...
—
Reply to this email directly, view it on GitHub
<#978 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AD6OV4OINIE45PRRVHHK5WDWBVMKDANCNFSM5A3VNP3A>
.
You are receiving this because you commented.Message ID:
<module-federation/module-federation-examples/repo-discussions/978/comments/3803902
@github.com>
|
Beta Was this translation helpful? Give feedback.
-
|
Guys, paid package for @module-federation/nextjs-mf |
Beta Was this translation helpful? Give feedback.
-
|
Open source package now has SSR support. Paid package not required. |
Beta Was this translation helpful? Give feedback.
-
|
Please note nextjs-MF, on npm has feature parity with nextjs-ssr this means that Federation support on next is
GitHub sponsors are appreciated as I’ve lost my funding source by choosing to no longer charge money for these plugins |
Beta Was this translation helpful? Give feedback.
-
|
@module-federation/nextjs-mf is this package free to consume ?? I'm not able to download this package |
Beta Was this translation helpful? Give feedback.
-
|
So it means that we can use nextjs-MF with ssr support or we need to use
only nextjs-SSR ?
…On Fri, Oct 7, 2022 at 9:15 AM Zack Jackson ***@***.***> wrote:
Please note nextjs-MF, on npm has feature parity with nextjs-ssr
this means that Federation support on next is
1. free
2. open source
3. supports SSR
GitHub sponsors are appreciated as I’ve lost my funding source by choosing
to no longer charge money for these plugins
—
Reply to this email directly, view it on GitHub
<#978 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AD6OV4MPZRIFSZGR3UXZ2DLWB7EYBANCNFSM5A3VNP3A>
.
You are receiving this because you commented.Message ID:
<module-federation/module-federation-examples/repo-discussions/978/comments/3820385
@github.com>
|
Beta Was this translation helpful? Give feedback.
-
|
Just use nextjs MF. The SSR package is no longer needed or maintained. |
Beta Was this translation helpful? Give feedback.
-
|
But ssr is not working on Nextjs-mf, right ? Or I did something wrong?
…On Sat, 8 Oct 2022 at 09:42 Zack Jackson ***@***.***> wrote:
Just use nextjs MF. The SSR package is no longer needed or maintained.
—
Reply to this email directly, view it on GitHub
<#978 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AD6OV4M3G6CVDHCF6FXO453WCEQVJANCNFSM5A3VNP3A>
.
You are receiving this because you commented.Message ID:
<module-federation/module-federation-examples/repo-discussions/978/comments/3827723
@github.com>
|
Beta Was this translation helpful? Give feedback.
-
|
Hi. Thank you for all the super work on this! I understand this has now gone open source and is free however when I try to install it, |
Beta Was this translation helpful? Give feedback.
-
|
I am trying to use next-mf package in NX repo. Using the same config as implemented here: I am facing issue with this import: import '@module-federation/nextjs-mf/lib/include-defaults'; There is no lib folder in the published package, I am able to find this file in "src" folder, the path is getting resolved. Even then remote entry file is not fetched by the host. can you please confirm that this implementation is correct and there is no missing content in published package? |
Beta Was this translation helpful? Give feedback.
-
|
@ScriptedAlchemy similar problem: Error: Cannot find module '@module-federation/nextjs-mf' |
Beta Was this translation helpful? Give feedback.
-
|
Hi @ScriptedAlchemy |
Beta Was this translation helpful? Give feedback.
-
|
Has any ever run into the issue where the remoteEntry.js file is generated locally under |
Beta Was this translation helpful? Give feedback.
-
|
next JS support for micro-frontend is clumsy and not working properly, weird error messages that does not hint about the actual problem. |
Beta Was this translation helpful? Give feedback.
-
I have navLinks.tsx in app directory (for nextjs 13 version) as below:"use client"; {categories.map((category) => ( ))} ); } export default NavLinks;And next.config.js as blow: /** @type {import('next').NextConfig} */ const nextConfig = { And i am getting error as below: error - ./app/NavLinks.tsx The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue. ,-[1:1] Do you have any example form client and server components interleaved (by use client) for module federation? |
Beta Was this translation helpful? Give feedback.
and others
-
This software has been released as open source.
https://github.com/module-federation/universe/tree/main/packages/nextjs-mf
Please consider sponsoring me via GitHub sponsors as we are now totally dependent on sponsors to fund the development.
Next federation is extremely expensive to maintain. I've personally invested about $100,000 into its development.
Excluding the development hours I've spent- which comes to about $250,000 in dev hours.
If you can afford to, every dollar goes a very long way
Beta Was this translation helpful? Give feedback.
All reactions