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