Uncaught ReferenceError: __rf_placeholder__shareScope

[UrielJavier]

Hello, again...

The host App has this error:
Uncaught ReferenceError: __rf_placeholder__shareScope is not defined at federation:18:3

I know that im not giving too much information about the case, but maybe some know why this could happen.

[ruleeeer]

I would like to know which version you are using? This definition has been removed and I suggest you use the latest version

[ruleeeer]

Are you using a chunk file generated by a previous version? __rf was previously used to identify the file prefix generated by vite-plugin-federation, and was changed to __federation a long time ago, so theoretically chunks generated after using the new build will not generate anything related to __rf

[ruleeeer]

Or if you provide me with a reproduce this git repository, maybe something strange will happen

[UrielJavier]

The problem is at federation:18:3, i didnt generate any file with __rf, but in the source code im seeing this: ${getModuleMarker('shareScope')} > return type ? __rf_${type}__${value} : __rf_placeholder__${value}...

[ruleeeer]

This placeholder will theoretically be replaced, if not there should be a bug

[UrielJavier]

In remote-development.ts is not going to be replaced! The method is called with only one param

[ruleeeer]

Also, there are some examples under the repository that may be helpful to you
https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples

[UrielJavier]

Yes! I used them! Thnks :)

[dciesielkiewicz]

Hello, again...

The host App has this error: Uncaught ReferenceError: __rf_placeholder__shareScope is not defined at federation:18:3

I know that im not giving too much information about the case, but maybe some know why this could happen.

@UrielJavier Not sure if that can help in your specific use case, but I had exact same issue and solved it by replacing vite-tsconfig-paths usage with standard resolve: { alias: {...} }.

[UrielJavier]

i love you, thnksss

[UrielJavier]

@ruleeeer do you know why this change can fix the problem?

[ruleeeer]

sry, I don't know why this is the case, it's strange, maybe a replicated project is needed to verify it

[nemonemi]

Could you please give more details as to how you've resolved it, precisely?

Also, is it possible to have both the host and remote be Typescript projects? I've followed a tutorial that used only Javascript, and it worked seamlessly, however, with Typescript that's not the case.

[paulo9mv]

Did your code worked in dev mode also? Or only for build production?
For me using resolve: alias: {...} worked for build production only

[He110te4m]

I encountered the same problem in the latest version (1.2.2) . Is there a viable solution?

[He110te4m]

I logged into transform hook and found that the module ID that appears in transform is sometimes not \0virtual:__federation__.
Instead, it's virtual: xxx/__federation__ , where xxx represents the project for remote APP.
I changed the if condition to code.replace(getModuleMarker("shareScope"), scopeCode.join(","));.

I modify the timing of code.replace(getModuleMarker("shareScope"), scopeCode.join(","));.

The final code changes are as follows:

- if (id === "\0virtual:__federation__") {
+ if (/\0virtual:.*__federation__/.test(id)) {
     const scopeCode = await devSharedScopeCode.call(
       this,
       parsedOptions.devShared
     );
     return code.replace(getModuleMarker("shareScope"), scopeCode.join(","));
   }

[christoph-schlumpf]

Hi @He110te4m , @kirill-kalinin,
Did this solve the issue? Do I have to fork vite-plugin-federation to be able to fix it for my app?

Kind regards

[christoph-schlumpf]

Hi @He110te4m , @kirill-kalinin,
I was able to fix it: #159 (reply in thread)

Best regards!

[mstykow]

I encountered this issue while converting the repos (host + remote) to use absolute imports. The remote was fine using the tsConfigPaths plugin but in the host I needed to replace the plugin with a manual conversion in vite.config.ts:

resolve: {
    alias: [{ find: '@', replacement: __dirname }],
},

My tsconfig:

"compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/src/*": ["src/*"],
            "@/e2e/*": ["e2e/*"]
        }
}

[christoph-schlumpf]

Hi @ruleeeer ,
Thank you for this great plugin!
Unfortunately, I have this issue only in production builds. In local development, the remote gets loaded in the host app. But after doing a production build I get the same issue as discussed above (Uncaught ReferenceError: __rf_placeholder__shareScope is not defined at).

My implementation is based on #481, so I dynamically load the remote.

I use v1.3.3 of the vite-plugin-federate but encountered the issue in v1.3.2 too.

Any help or advice?

[christoph-schlumpf]

Hi @ruleeeer,
Finally I got it working in production builds. The solution was to add a dummy "remotes:" declaration in vite.config.js:

plugins: [
        federation({
            name: "default",
            remotes: {
                dummy: {
                    external: "",
                    format: "var",
                },
            },
            shared: [],
        }),
    ],

As soon as I did this, the error is gone and the module can be loaded in production builds too (via __federation_method_setRemote and __federation_method_getRemote).

Best regards!

[paulo9mv]

For what I could investigate, vite-tsconfig-paths is messing paths from module federation and vite virtual imports.
It converts the following path: __federation__ to virtual:/Users/username/repo/__federation__.

However, vite-plugin-federation uses some "fixed" paths in if cases, like this:

vite-plugin-federation/packages/lib/src/index.ts

Line 152 in 0840333

if (args[0] === 'virtual:__federation__') {

And this makes the application break. I'm not sure how this should be addressed, perhaps changing this absolute comparison to includes(":virtual") && includes("__federation__") or a regex approach.

Also the following line

vite-plugin-federation/packages/lib/src/dev/remote-development.ts

Line 403 in 0840333

const pathname = relativePath ?? `/@fs/${moduleInfo.id}`

It does /@fs/node_modules/.vite/deps/any-shared-lib.js?v=12345 instead of /@fs/Users/username/repo/node_modules/.vite/deps/any-shared-lib.js?v=12345

---

I'm checking if there's any prop that we could pass to vite-tsconfig-paths to ignore __federation__. But I honestly think the best option would be to change these lines mentioned to allow a custom path

[husayt]

Hi @paulo9mv, did you manage to find the workaround? Would very appreciate any tips, this has blocked me altogether.

Thanks

[paulo9mv]

Hi @husayt , I wasn't able to achieve an working workaround. I was investigating if adding vite-plugin-federation to our project would be viable, but the current state of this plugin is not so promising. ):
This bug in particular made the implementation impracticable.

We decided to abandon it for now and wait for the next steps of rolldown, the rust implementation of rollup that will come with module federation and be the core blunder of vite.