How to use revalidate?

[expertup]

Simple question, how to use the code revalidate snippet from the documentation to get styled-components?

From what I understand, after changing e.g. the file styled-components/app2/src/client/components/Content.tsx after calling revalidate, App1 will load the new remote version of the file from App2 without stopping and restarting the process?

I tried:
styled-components/app1/src/client/components/App.tsx

import React from 'react';
import { Helmet } from 'react-helmet';
import styled from 'styled-components';
import { revalidate } from '@module-federation/node/utils';

 const Content = require('app2/Content').default;

const App = () => {
  const [state, setState] = React.useState('');
  
  revalidate().then((shouldReload) => {
    console.log(shouldReload);
    
    if (shouldReload) {
      global.clearRoutes();
    }
  });

  return (
    <Container>
      aaaaaaaaaaaa
      <Content />
    </Container>
  );
};

Not working.

I tried add into:
styled-components/app1/src/server/index.ts

import path from 'path';
import express from 'express';
import { revalidate } from '@module-federation/node/utils';

const app = express();
const PORT = 3000;

global.clearRoutes = () => {
  app._router.stack = app._router.stack.filter((k) => !(k && k.route && k.route.path));
};

// static path where files such as images and js will be served from
app.use('/static', express.static(path.join(process.cwd(), 'dist/client')));

// =================== WARNING ===================
// ATTENTION this will expose ALL server files
// =================== WARNING ===================
app.use('/server', express.static(path.join(process.cwd(), 'dist/server')));

app.get('/', async (req, res, next) => (await import('./serverRender')).default(req, res, next));

app.get('/reload', (req, res, next) => {
  // in some other file (within the scope of webpack build)
  // wherever you have your revalidation logic
  revalidate().then((shouldReload) => {
    console.log(shouldReload);

    if (shouldReload) {
      global.clearRoutes();
    }
  });

  res .send("ok");
})

app.listen(PORT, () => {
  console.info(`[${new Date().toISOString()}]`, `App1 is running: 🌎 http://localhost:${PORT}`);
});

export default app;

Also not working... I'm updating styled-components/app2/src/client/components/Content.tsx and how to see changes without rerun process?

[brunocabral88]

revalidate is a server-side feature used to reload remote bundles (because NodeJS loads them and keeps them in the cache, so we need to tell it to flush the import cache and re-sync). Thus, your first example is incorrect because is would be called client-side.

The second example seems correct to me (although I would put the res.send("ok"); right after the if (shouldReload) statement.
What I think is missing here is that you need to make use of [contenthash] in the output.filename in the remote webpack config in order for revalidate to detect the changes.
Take a look at #843 and https://webpack.js.org/configuration/output/#outputfilename

[DavidBoltuev]

Hi everyone!
I’m also experiencing issues with using the revalidate method on the server (Express, module-federation@v2, React). I’ve tried both the second approach and other methods, but none of them have worked. I consistently see outdated versions until I restart the server. Clearing routes doesn’t help either.
Additionally, I couldn’t find any references in the module-federation package (or its examples) on how to overwrite the module cache.
Does anyone have a working example with hot reloading of modules on a server?

[Scott-Fischer]

If you don't already have a reproducible example handy, you might want to supply some information about the environment of your host app, such as module syntax style (CJS or ESM) and node version.

The native node.js module cache could be implemented in one of two ways depending on if you're using import or require so this information is really important when debugging stale cache issues.