Live Reload Not Working

shallow-alchemy commented 1 day ago

Describe the bug

Live reload does not work for example manifest protocol (this example)

Reproduction

Correct typescript and port errors and start above example using pnpm

Used Package Manager

npm

System Info

System:
    OS: macOS 14.5
    CPU: (16) arm64 Apple M3 Max
    Memory: 590.08 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
    npm: 10.9.0 - ~/Development/ui-deals/node_modules/.bin/npm
  Browsers:
    Chrome: 129.0.6668.90
    Edge: 129.0.2792.79
    Safari: 17.5

Validations

[X] Read the docs.
[X] Read the common issues list.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Module federation issue and not a framework-specific issue.
[X] The provided reproduction is a minimal reproducible example of the bug.

shallow-alchemy commented 1 day ago

guh, I'm totally going to get thumbs downed for this, but for anyone else stuck on this like we've been, my (admittedly hacky) current workaround is to put this in the remote:

import { mkdir, existsSync, writeFile } from 'fs'

const redText = '\x1b[1;37;41m'
const noPathMsg = 'No hostPath configured!'
const invalidPathMsg = 'No hostPath found. Please configure a path to an existing host application.'
const BD = '.remote' // BindingDirectory
const BFN = 'remote' // BindingFileName
const BE = '.binding' // BindingExtension

const RsBuildHostBinding = (hostPath): RsbuildPlugin => {
  return ({
    name: 'bindToHost',
    setup(api) {
      api.onDevCompileDone(() => {
      if (!hostPath) return console.log(redText, noPathMsg)
        if (!existsSync(hostPath)) return console.log(redText, invalidPathMsg)
        mkdir(
          `${hostPath}/${BD}`,
          () => console.log(`Created ${BD} directory in host`)
        )
        writeFile(
          `${hostPath}/${BD}/${BFN}${BE}`,
          `${Date.now()}`,
          () => console.log(`Updated ${BFN}${BE}`)
        )
      })
    },
  })
}

and add it to your plugins:

  plugins: [ RsBuildHostBinding('../path/to/host/repo') ]

and to put this in your host:

  dev: {
    watchFiles: {
      paths: '.remote',
      type: 'reload-page'
    }
  },

and add the .remote dir that the plugin creates to your .gitignore.

it ain't pretty, but we can dev now 😄

2heal1 commented 1 day ago

The hmr failed because rsbuild correct the server.port meanings , it not equals dev.client.port related pr https://github.com/web-infra-dev/rsbuild/pull/2639

And i update the example configuration to fix the issue https://github.com/module-federation/module-federation-examples/compare/fix/update-port?expand=1

shallow-alchemy commented 15 hours ago

adding the client port fixes it. Thank you for the quick response!

module-federation / core