Comments (11)
Can you send me on a minimal repo of your issues?
from universe.
A good example to follow would be this repo
https://github.com/module-federation/module-federation-examples/tree/master/nextjs
from universe.
@Pkearney2021 ...aaaaand that was it! Thanks so much for walking me through the details! I can now successfully run an example as well as build them. I will update my example repo soon with the final working setup. I will also open a PR with more detail to the setup instructions as I'm sure others could use it as well. Then I will close this issue.
from universe.
I had a similar issue with that. What version of next are you using?
I had this issue on next 11 so I downgraded to "next": "10.2.3"
try this and see if it starts requesting the correct bundles.
from universe.
@Pkearney2021 thanks! I tried downgrading but now I get compilation errors about the webpack configuration. it'd be super helpful if someone could share either a tutorial or a repo where the latest version of this plugin works with at least SOME designated version of next. as for now we're just looking to build a POC around it.
from universe.
Here is a super minimal repo, only has next2 in it yet. After downgrading to 10.2.3 and adding the custom next.config.js it won't even run, says it's using webpack4. https://github.com/peter-gorgenyi-mgm/nextjs-mf-troubleshooting
from universe.
Hey, sorry I was commenting with two different accounts before.
So to make it run webpack 5 in the next.config.js
add this.
future: { webpack5: true }
below reactStrictMode: true,
I tried it there and it worked fine :)
Full config
module.exports = withFederatedSidecar({
name: "next2",
filename: "static/chunks/remoteEntry.js",
exposes: {
"./sampleComponent": "./components/sampleComponent.js",
},
shared: {
react: {
// Notice shared are NOT eager here.
requiredVersion: false,
singleton: true,
}
},
})({
reactStrictMode: true,
future: {
webpack5: true
}
});
from universe.
Thanks a lot for the config details, Phil. Let me see if I can now complete a stable setup in that repo. Also yes, I have noticed that example repo, I was just disregarding it because of some outdated versions. But it seems like we'll have to wait for this plugin to work with the latest and greatest.
from universe.
Here is my simplified working example repo, I will keep this up to date with new developments around this plugin:
https://github.com/peter-gorgenyi-mgm/nextjs-mf-troubleshooting
from universe.
@ScriptedAlchemy I created a local branch adding more explicit setup instructions after my initial struggle of setting up a working example. Here is a gist of the proposed README.md:
https://gist.github.com/peter-gorgenyi-mgm/410cdd60495cce39f31365c509e7ec5f
Note that some of the additions are temporary for the NextJS 10.2 setup until support for NextJS 11 arrives. If you agree with the additions, add me as a contributor and I can open a pull request. Alternatively feel free to take any part of this gist.
Once again, your contribution is truly appreciated! I will now close this issue.
from universe.
Hey if there's any updates that should be added to the readme, I'll gladly accept PRs to improve ease of use.
I suffer from knowing how all this works and spending many months deep in MF land.
What i think everyone knows vs. what is actually known is hard to reconcile
from universe.
Related Issues (20)
- Type file missing when using vue-tsc HOT 10
- 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 5
- @mf-types. expose typings for shared modules HOT 1
- Infer shared modules based from the host's manifest file. HOT 2
- Duplicate network request for chunk from multiple entryfiles HOT 7
- Module Federation SSR is incompatible with webpack-node-externals HOT 2
- The remote module is missing on the Window when running in the sandbox of the micro-frontend framework micro-app. HOT 5
- i try to use init() and app cant find it HOT 4
- Using the `revalidate` method to trigger hot reload can cause service crashes HOT 5
- dts for entries exposed with aliases are not emitting HOT 1
- Can't create Error Fallback when any Remote fails. HOT 9
- Chrome Extension is not working due to empty `moduleInfo` HOT 3
- web worker error in host HOT 2
- Exact matching alias does not work as expected in bridge webpack plugin HOT 2
- Shared dependency version cannot be resolved if installed at root of a monorepo
- Spaces in path to project with @module-federation/next-mf result in `Unterminated string in JSON at position` and HookWebpackError errors HOT 8
- how can I use in vue3 ts template HOT 8
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.