Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The refresh not works when module federation component is used in host app.#mf#MF #863

Open
dtyyy opened this issue Jul 16, 2024 · 2 comments

Comments

@dtyyy
Copy link

dtyyy commented Jul 16, 2024

When i used MF component in my host app for local development.The refresh is doesn’t work in MF component,but host app's refresh can work.

@dtyyy
Copy link
Author

dtyyy commented Jul 16, 2024

It seems like RefreshRuntime.injectIntoGlobalHook is not executed in MF, because the flag RefreshInjected has Injected by host app,but MF‘s remoteEntry also require a refresh-runtime.So when refresh happend,MF can't make a connection with React.InjectIntoGlobalHook injects some hooks to make sure react refresh ready to perform.

const safeThis = require('core-js-pure/features/global-this');
const RefreshRuntime = require('react-refresh/runtime');

if (process.env.NODE_ENV !== 'production') {
  if (typeof safeThis !== 'undefined') {
    var $RefreshInjected$ = '__reactRefreshInjected';
    // Namespace the injected flag (if necessary) for monorepo compatibility
    if (typeof __react_refresh_library__ !== 'undefined' && __react_refresh_library__) {
      $RefreshInjected$ += '_' + __react_refresh_library__;
    }

    // Only inject the runtime if it hasn't been injected
    if (!safeThis[$RefreshInjected$]) {
      // Inject refresh runtime into global scope
      RefreshRuntime.injectIntoGlobalHook(safeThis);

      // Mark the runtime as injected to prevent double-injection
      safeThis[$RefreshInjected$] = true;
    }
  }
}
   // Library mode
      __react_refresh_library__: JSON.stringify(
        Template.toIdentifier(
          this.options.library ||
            compiler.options.output.uniqueName ||
            compiler.options.output.library
        )
      )

as the code show, we can use the plugin option library or other webpack options to config the react_refresh_library.

@dtyyy dtyyy changed the title The refresh not works when module federation component is used in host app. The refresh not works when module federation component is used in host app.#mf Jul 16, 2024
@dtyyy dtyyy changed the title The refresh not works when module federation component is used in host app.#mf The refresh not works when module federation component is used in host app.#mf#MF Jul 16, 2024
@ezamora-abbvie
Copy link

Any idea when this is going to be review?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants