core icon indicating copy to clipboard operation
core copied to clipboard

Expect support for the syntax of import statements at runtime.

Open FaureWu opened this issue 1 year ago • 5 comments

Clear and concise description of the problem

I expect to load remote resources at runtime. Currently, the official runtime package can only be used with loadRemote.

I expect is

Example:

import Button from "remote:app/Button"

Suggested solution

Before this, I modified a version based on a Webpack plugin to support this functionality:

RemoteWebpackPlugin

However, it is still quite basic, and I hope the official version can implement similar features.

Alternative

No response

Additional context

No response

Validations

  • [x] Read the Contributing Guidelines.
  • [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

FaureWu avatar Feb 05 '25 09:02 FaureWu

with ModuleFederationPlugin you can use import statements syntax. if you are using pure MF runtime to register modules and load modules, you must use loadRemote instead of import statements syntax to load a module.

danpeen avatar Feb 05 '25 12:02 danpeen

with ModuleFederationPlugin you can use import statements syntax. if you are using pure MF runtime to register modules and load modules, you must use loadRemote instead of import statements syntax to load a module.

This doesn't meet my needs. I don't want to register the remote at build time; instead, I want to register it at runtime, while still being able to use the same import xxx from xxx syntax, rather than loadRemote.

FaureWu avatar Feb 05 '25 14:02 FaureWu

This doesn't meet my needs. I don't want to register the remote at build time; instead, I want to register it at runtime, while still being able to use the same import xxx from xxx syntax, rather than loadRemote.

At build time, we don't know which imports are remote, so we need a way to identify them, such as using a syntax like remote:app/xxx.

FaureWu avatar Feb 05 '25 14:02 FaureWu

you can use a runtime plugin to rewrite the requests as they happen.

https://module-federation.io/plugin/dev/index.html

https://github.com/module-federation/module-federation-examples/tree/master/runtime-plugins

using the hooks you could read the requested static import then rewrite it to somewhere else, and use some fake remote prefix/

import thing from 'interceptMe/REMOTE_NAME/EXPOSE_NAME'

then in runtimePlugin:

loadRemote() { const realRequest = args.id.split('interceptMe') return realRequest }

something like that could work. i have dynamic rewrite examples in the federation example runtime plugin folder that i linked here

ScriptedAlchemy avatar Feb 05 '25 21:02 ScriptedAlchemy

you can use a runtime plugin to rewrite the requests as they happen.

https://module-federation.io/plugin/dev/index.html

https://github.com/module-federation/module-federation-examples/tree/master/runtime-plugins

using the hooks you could read the requested static import then rewrite it to somewhere else, and use some fake remote prefix/

import thing from 'interceptMe/REMOTE_NAME/EXPOSE_NAME'

then in runtimePlugin:

loadRemote() { const realRequest = args.id.split('interceptMe') return realRequest }

something like that could work. i have dynamic rewrite examples in the federation example runtime plugin folder that i linked here

I tried using the runtime plugin, but it failed during the compilation phase because the 'remote' wasn't registered. As a result, the process couldn't reach the runtime plugin.

FaureWu avatar Feb 06 '25 01:02 FaureWu

Stale issue message

github-actions[bot] avatar Apr 07 '25 15:04 github-actions[bot]