profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/ScriptedAlchemy/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Zack Jackson ScriptedAlchemy @webpack,@module-federation, @lululemon, @respond-framework Redmond, WA Principal Engineer | Webpack maintainer, Inventor & co-creator of Module Federation, Universal Javascript, JavasScript orchestration at scale.

react-static/react-static 9808

โš›๏ธ ๐Ÿš€ A progressive static site generator for React.

faceyspacey/react-universal-component 1682

๐Ÿš€ The final answer to a React Universal Component: simultaneous SSR + Code Splitting

faceyspacey/redux-first-router 1560

๐ŸŽ– seamless redux-first routing -- just dispatch actions

faceyspacey/extract-css-chunks-webpack-plugin 687

Extract CSS from chunks into multiple stylesheets + HMR

rookLab/react-component-caching 374

Speedier server-side rendering with component caching in React 16

faceyspacey/webpack-flush-chunks 354

๐Ÿ’ฉ server-to-client chunk discovery + transportation for Universal Rendering

hadeeb/react-lazy-hydration 271

Lazy Hydration for Server Rendered React Components

faceyspacey/universal-demo 229

DEMO: Webpack Flush Chunks + React Universal Component 3.0 ๐Ÿš€

faceyspacey/babel-plugin-universal-import 113

๐Ÿพ universal(props => import(`./${props.page}`)) + dual css/js imports

respond-framework/rudy 81

Rudy Router - MVC style route async controller for react-redux applications.

issue closedmodule-federation/module-federation-examples

Remove paid example next-mf

It is unacceptable to use paid plugins based on free solutions in open source examples.

This should be remove https://github.com/module-federation/module-federation-examples/tree/master/nextjs

closed time in 2 days

popuguytheparrot

issue commentwebpack/webpack

With module federation, submodules of shared modules are not actually shared if they are imported individually

@messaooudi Just be careful, if you did it on something like material-ui/icons/ it'll add 5000 keys to the remote container.

I think in production mode if you share something but never actually use it, webpack may tree shake it out. But I can't confirm this and haven't tested that scenario in several months and only tested this in the context of an angular build which may have aggressive optimization. Just keep an eye on the file size of the remote entry container itself when using the trailing slash

antoinetissier

comment created time in 2 days

issue commentwebpack/webpack

With module federation, submodules of shared modules are not actually shared if they are imported individually

Agreed. I'm planning to open another PR to the docs in response of growing complaints about missing information โ„น๏ธ

antoinetissier

comment created time in 2 days

issue commentwebpack/webpack

With module federation, submodules of shared modules are not actually shared if they are imported individually

Put a trailing / on the end of whatever your sharing. This will cause webpack to reference anything that matches the partial path, not just the index file / main resolution point

antoinetissier

comment created time in 3 days

issue commentwebpack/webpack.js.org

WebpackModuleFederation is verbose and documented poorly

Iโ€™ll opening a pr, will reference this thread - could use some guidance one whatโ€™s helpful or missing. During the review.

yeah 77 contributors to the MF examples but very few work on webpack itself unfortunately.

200 page book, fair point. But what the api keys are vs leveraging the mechanism is very different. That said an extra paragraph would probably save users a lot of time and head scratching.

Sorry to hear youโ€™ve given up on using the plugin. Issue acknowledged

Akazm

comment created time in 3 days

issue commentmodule-federation/module-federation-examples

Question: reloading/unmounting a FM

Also someone got HMR working. On federated code. Use FMR / live reload on the hot application and HMR only on the remote containers seemed to work for some users.

csvan

comment created time in 3 days

issue commentmodule-federation/module-federation-examples

Module Federation with Webpacker/Rails host resulting in ScriptLoadError

Nah I think what youโ€™ve got should be fine

olivierlacan

comment created time in 3 days

issue commentwebpack/webpack.js.org

WebpackModuleFederation is verbose and documented poorly

It's actually 4 plugins under the hood, webpack is mostly just a bunch of plugins.

Options are not required. Technically none are since the api activates different parts of the plugin (sub plugins) depending on what options you add.

Set publicPath to auto. Look in your build output file and see where the remote entry is ending up.

Have you looked at module-federation-examples? Thats the "official" source of reference. If I didn't author the repo you are referencing, there's a high probability it's not done properly.

Webpack is hard to document, I wrote a 200 page book just on federation, still that doesn't cover everything.

This is open source software. React is heavily funded. Redux has a pretty small api. The surface area of webpack is massive in comparison.

If you're stuck DM me on twitter and we can do a zoom call. Take notes and PR the docs.

Akazm

comment created time in 4 days

issue closedvercel/next.js

[Module Federation] next fails to compile in prod mode due to "Can't resolve"

What version of Next.js are you using?

11.0.2-canary.20

What version of Node.js are you using?

16.5.0

What browser are you using?

chrome

What operating system are you using?

macOS

How are you deploying your application?

N/A

Describe the Bug

When using Module Federation imports, specifically in the index page, I get a module not found error. I can use Federated imports on other pages, just not the default index page

//doesnt work
const RemoteTitle = dynamic(() => import("checkout/title"), { ssr: false });
//works
const RemoteTitle = dynamic(() => window.checkout?.get("./title").then((factory) => factory()), { ssr: false });
[0] warn  - No ESLint configuration detected. Run next lint to begin setup
[0] info  - Creating an optimized production build...
[2] info  - Creating an optimized production build...
[1] Failed to compile.
[1] 
[1] ModuleNotFoundError: Module not found: Error: Can't resolve 'checkout/title' in '/Volumes/lulu_dev/module-federation-examples/nextjs/home/pages'

with the following webpack config, where resolve alias is set to false for checkout

  webpack(config, options) {
    const { webpack, isServer } = options;
    config.experiments = { topLevelAwait: true };
    config.output.publicPath = "auto";

    config.module.rules.push({
      test: /_app.js/,
      loader: "@module-federation/nextjs-mf/lib/federation-loader.js",
    });

    if (isServer) {
      // ignore it on SSR, realistically you probably wont be SSRing Fmodules, without paid support from @ScriptedAlchemy
      Object.assign(config.resolve.alias, { checkout: false });
    } else {
      config.output.publicPath = "auto";
      config.plugins.push(
        new webpack.container.ModuleFederationPlugin({
          remoteType: "var",
          remotes: {
            home: "home",
            shop: "shop",
            checkout: "checkout",
          },
          shared: {
            "@module-federation/nextjs-mf/lib/noop": {
              eager: false,
            },
            react: {
              singleton: true,
              eager: true,
              requiredVersion: false,
            },
          },
        })
      );
    }
    return config;
  },

Expected Behavior

The build should pass.

To Reproduce

try dynamic importing a federated module

closed time in 4 days

ScriptedAlchemy

issue commentvercel/next.js

[Module Federation] next fails to compile in prod mode due to "Can't resolve"

Appears to have been fixed.

Thanks team โค๏ธ

ScriptedAlchemy

comment created time in 4 days

push eventfaceyspacey/universal-demo

snyk-bot

commit sha 3ffcd2bb42a0d3519a5ff925c2acd5b262524f6b

fix: package.json & package-lock.json to reduce vulnerabilities The following vulnerabilities are fixed with an upgrade: - https://snyk.io/vuln/SNYK-JS-ANSIREGEX-1583908

view details

push time in 5 days

issue closedmodule-federation/module-federation-examples

microfrontend localhost development with a deployed remote app shell

Hey,

I wanted to get some guidance around a problem I am facing. Basically I am following the app shell pattern from here, where I have an app shell that microfrontend applications consume during development.

The example above works great when all the microfrontend apps are running locally via webpack dev server. However, I have a use-case where I want to be able to develop on microfrontend apps without needing to run any of its remotes locally, specifically the Shell, and just point to the remotes that are already in the CDN. The problem I am facing is that the deployed remotes already have their microfrontend apps remote urls set via external-remotes-plugin so it won't ever know about the localhost microfrontend app that is currently being developed on.

My current solution to this is to leverage localStorage and dynamically check if there is an override url (which just points to the localhost + port of the app that is being developed on) before using the remote CDN value. So in my deployed Shell's index.ts file I have something like:

...
window.app2Url = localStorage.getItem('app2LocalhostOverrideUrl') ||  `${APP_2_CDN_URL}/remoteEntry.js`;

import("./bootstrap");
...

I just wanted to know if I am I on the right path or is there another way this can be done that doesn't seem less hacky.

Thanks in advance!

closed time in 5 days

thunderousNinja

issue closedmodule-federation/module-federation-examples

How to have multiple instance of the same remoteEntry file

I have used module federation in Angular 12 with GraphQL integration in the below pattern

  1. Child2: Consists of two different modules(a and b) which are exposes to other mfes
  2. Child1: Consumes 1 of the module(a) of Child2 and exposes module of its own
  3. Mfe_Parent: Consumes both Child1 and Child2(with module(b))

To overcome cache busting, I've used timestamp as queryparam along with remotePaths In Parent Mfe_Parent:

module.exports = {
    plugins: [
        new ModuleFederationPlugin({
            remotes: {
                "child1": `child1@https://child1.com/child1RemoteEntry.js?v=${todayTs}`,
                "child2": `child2@https://child2.com/child2RemoteEntry.js?v=${todayTs}`,
            },
       })
]};

In Child1 Mfe:

const todayTs = new Date().setHours(0, 0, 0, 0);
module.exports = {
    plugins: [
        new ModuleFederationPlugin({
            remotes: {
                "child2": `child2@https://child2.com/child2RemoteEntry.js?v=${todayTs}`,
            },
       })
]};

So with this approach the timestamp "todayTs" used will be the same while build and there will be only 1 instance of child2 is created which will be consumed by both Mfe_Parent and Child1. But with this approach if there is any change in Mfe_Parent which requires a deployment, we will still have to deploy Child1 even if there are no changes made, if not the "todayTs" will be different in both the remote paths and two instances will be created for Child2. Due to two instances created, GraphQL is not able to create two difference instance of the module from respective called mfes.

Is there any possible configuration or any way using which this dependency can be eliminated and only Mfe_Parent can be deployed without having to deploy Child1 always.

closed time in 5 days

dr194

issue closedmodule-federation/module-federation-examples

Dynamic remote throwing Container initialization failed as it has already been initialized with a different share scope

Hi, First thanks a lot for giving us module federation. It is working really well for me. I was inspired by the dynamic remote example and I tried to implement that because i have 22 mfe and loading 22 remoteEntry.js file at once increases the initial render time. I followed the same approach as mentioned in the example but facing the above issue. My scenario also bit weird such that one mfe is library kind of thing. So all other 21 mfe use that library mfe.

Config for shell:

new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        app_library: app_library@app_library/remoteEntry.js,
      },
     .......
  })

Config for remaning MFEs:

  new ModuleFederationPlugin({
      name: <respective name>,
      filename: 'remoteEntry.js',
      library: { type: 'var', name: <respective name>},
      exposes: {
        ...exposedPaths,
      },
      remotes: {
        app_library: 'app_library',
      },
      },
    })

Config for app_library:

 new ModuleFederationPlugin({
      name: app_library,
      filename: 'remoteEntry.js',
      library: { type: 'var', name: 'app_library' },
      exposes: {
        ...exposedPaths,
      },
    })

Low level api's used:

 await __webpack_init_sharing__('default')
  const container = (window as any)[remoteName] as Container
  await container.init(__webpack_share_scopes__.default)
  const factory = await container.get(exposedModule)
  const Module = factory()
  return Module as T

Issue Facing:

On loading Shell alone things (which loads app_library mfe too) works fine. But when I try to load other mfe through lazy routing it is throwing below error because app_library is already loaded. And stops there without navigating further.

sharing:17 Initialization of sharing external failed: Error: Container initialization failed as it has already been initialized with a different share scope

Expectation:

Instead of trying to initialize again it should use already initialized with or without warning and proceed.

Note:

Not sure it is a bug or feature request or question for stack overflow. Since I don't find any example for my scenario posting here.

Thanks in advance

closed time in 5 days

RoopanV

issue commentmodule-federation/module-federation-examples

Changing routes in remote module using history.push is throwing an error

Feels like the history dependency or something isnโ€™t being shared or is not a singleton. So itโ€™s getting recreated lower down in the tree and is empty.

athapliyal

comment created time in 5 days

issue commentmodule-federation/module-federation-examples

Host App cannot load Remote page because is not served inside its state provider

Create an app shell. Thatโ€™s the most reliable pattern. Otherwise you need to have some powerful composition patterns in place to enable decentralized encapsulation

Beslinda

comment created time in 5 days

push eventmodule-federation/module-federation-examples

renovate[bot]

commit sha 967f9985e9a4b7892fe1a44d9b8f7ce52dc71463

chore(deps): pin dependencies (#1170) Co-authored-by: Renovate Bot <bot@renovateapp.com>

view details

push time in 5 days

delete branch module-federation/module-federation-examples

delete branch : renovate/pin-dependencies

delete time in 5 days

PR merged module-federation/module-federation-examples

chore(deps): pin dependencies

WhiteSource Renovate

This PR contains the following updates:

Package Type Update Change
@babel/core (source) devDependencies pin ^7.15.5 -> 7.15.5
@babel/preset-react (source) devDependencies pin ^7.14.5 -> 7.14.5
babel-loader devDependencies pin ^8.2.2 -> 8.2.2
lerna devDependencies pin ^4.0.0 -> 4.0.0
react-refresh (source) devDependencies pin ^0.10.0 -> 0.10.0

๐Ÿ“Œ Important: Renovate will wait until you have merged this Pin PR before creating any upgrade PRs for the affected packages. Add the preset :preserveSemverRanges to your config if you instead don't wish to pin dependencies.


Configuration

๐Ÿ“… Schedule: At any time (no schedule defined).

๐Ÿšฆ Automerge: Disabled by config. Please merge this manually once you are satisfied.

โ™ป Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

๐Ÿ‘ป Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.


  • [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box.

This PR has been generated by WhiteSource Renovate. View repository job log here.

+8 -8

1 comment

3 changed files

renovate[bot]

pr closed time in 5 days

PR closed module-federation/module-federation-examples

chore(deps): update dependency vite to v2.5.7

WhiteSource Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
vite 2.4.1 -> 2.5.7 age adoption passing confidence

Release Notes

<details> <summary>vitejs/vite</summary>

v2.5.7

Compare Source

Bug Fixes
Features

v2.5.6

Compare Source

Bug Fixes
  • importAnalysis: properly inherit dependency version query for self imports (c7c39b1)
  • use debugger for package resolution warnings (#โ€‹4873) (38de2c9)

v2.5.5

Compare Source

Bug Fixes
  • hmr: should break on first matched plugin that performs custom hmr handling (b3b8c61)

v2.5.4

Compare Source

Bug Fixes

v2.5.3

Compare Source

Bug Fixes

v2.5.2

Compare Source

Bug Fixes
Features

v2.5.1

Compare Source

Bug Fixes
Features

v2.5.0

Compare Source

v2.4.4

Compare Source

Bug Fixes
Features
  • support ?inline css query to avoid css insertion (e1de8a8)

v2.4.3

Compare Source

Bug Fixes
Features

v2.4.2

Compare Source

Bug Fixes
Features

</details>


Configuration

๐Ÿ“… Schedule: At any time (no schedule defined).

๐Ÿšฆ Automerge: Disabled by config. Please merge this manually once you are satisfied.

โ™ป Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

๐Ÿ”• Ignore: Close this PR and you won't be reminded about this update again.


  • [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box.

This PR has been generated by WhiteSource Renovate. View repository job log here.

+15 -15

1 comment

2 changed files

renovate[bot]

pr closed time in 5 days

push eventmodule-federation/module-federation-examples

renovate[bot]

commit sha bc95c92ba099e7c5cfe870315ac36b27b0450d04

chore(deps): update dependency webpack-hot-middleware to v2.25.1 (#1176) Co-authored-by: Renovate Bot <bot@renovateapp.com>

view details

push time in 5 days

delete branch module-federation/module-federation-examples

delete branch : renovate/webpack-hot-middleware-2.x

delete time in 5 days

PR merged module-federation/module-federation-examples

chore(deps): update dependency webpack-hot-middleware to v2.25.1

WhiteSource Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
webpack-hot-middleware 2.25.0 -> 2.25.1 age adoption passing confidence

Release Notes

<details> <summary>webpack-contrib/webpack-hot-middleware</summary>

v2.25.1

Compare Source

</details>


Configuration

๐Ÿ“… Schedule: At any time (no schedule defined).

๐Ÿšฆ Automerge: Disabled by config. Please merge this manually once you are satisfied.

โ™ป Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

๐Ÿ”• Ignore: Close this PR and you won't be reminded about this update again.


  • [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box.

This PR has been generated by WhiteSource Renovate. View repository job log here.

+14 -14

1 comment

5 changed files

renovate[bot]

pr closed time in 5 days

push eventmodule-federation/module-federation-examples

renovate[bot]

commit sha 4f134ee88b0231881d9ef041e8900105f5214418

chore(deps): update dependency @types/jasmine to v3.9.1 (#1175) Co-authored-by: Renovate Bot <bot@renovateapp.com>

view details

push time in 5 days

delete branch module-federation/module-federation-examples

delete branch : renovate/jasmine-3.x

delete time in 5 days

PR merged module-federation/module-federation-examples

chore(deps): update dependency @types/jasmine to v3.9.1

WhiteSource Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@types/jasmine 3.9.0 -> 3.9.1 age adoption passing confidence

Configuration

๐Ÿ“… Schedule: At any time (no schedule defined).

๐Ÿšฆ Automerge: Disabled by config. Please merge this manually once you are satisfied.

โ™ป Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

๐Ÿ”• Ignore: Close this PR and you won't be reminded about this update again.


  • [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box.

This PR has been generated by WhiteSource Renovate. View repository job log here.

+25 -25

1 comment

10 changed files

renovate[bot]

pr closed time in 5 days

push eventmodule-federation/module-federation-examples

renovate[bot]

commit sha dbcee01ab5aa0bcd4312eb789ecd6327fd3cd2e7

chore(deps): update dependency @types/node to v12.20.25 (#1178) Co-authored-by: Renovate Bot <bot@renovateapp.com>

view details

push time in 5 days

delete branch module-federation/module-federation-examples

delete branch : renovate/node-12.x

delete time in 5 days