Uncaught ReferenceError: __rf_placeholder__shareScope is not defined

[bramdeba]

Versions

• vite-plugin-federation: 1.2.2
• vite: 4.0.1

Reproduction

https://github.com/bramdeba/vite-plugin-federation-issue

Additional Details

Steps to reproduce

• git clone https://github.com/bramdeba/vite-plugin-federation-issue
• navigate to project directory with terminal
• run yarn to install dependencies
• run yarn serve:host and yarn serve:remote simultaneously
• navigate to http://localhost:4300

What is Expected?

Expected is that you would see a TestButton-component, imported from the remote module.

What is actually happening?

Nothing is rendered, and you get an error in the console:

Uncaught ReferenceError: __rf_placeholder__shareScope is not defined
    at Ki (index-38bc938c.js:40:58371)
    at index-38bc938c.js:40:58803
Ki @ index-38bc938c.js:40
(anonymous) @ index-38bc938c.js:40

[salindae25]

In case you want a workaround put the following in index.html <script> const __rf_placeholder__shareScope={} </script>

[ureciocais]

Same issue here

[oychao]

same here

[mossen]

I have 1 remote and 2 hosts, this issue only happens on one of the hosts. I have same versions and configs.

this part of the generated code is missing for the host where I receive the error:

function get(name, remoteFrom) {
                    return __federation_import(name).then(module => () => {
                        if (remoteFrom === 'webpack') {
                            return Object.prototype.toString.call(module).indexOf('Module') > -1 && module.default ? module.default : module
                        }
                        return module
                    })
                }

                const wrapShareModule = remoteFrom => {
                    return {
                        'react':{'18.2.0':{get:()=>get('./__federation_shared_react.js', remoteFrom), loaded:1}}
                    }
                };

Instead I have this:

const wrapShareModule = remoteFrom => {
                    return {
                        __rf_placeholder__shareScope
                    }
                };

error:

dex-b09da57a.js:65912 Uncaught ReferenceError: __rf_placeholder__shareScope is not defined
    at wrapShareModule (index-b09da57a.js:65912:25)
    at index-b09da57a.js:65939:64

[mossen]

Resolved it!

Seems this is related to the tsconfig.json where baseUrl is not matching the paths.

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "baseUrl": "./src",
    "paths": {
      "src/*": ["*"],
    },
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

[He110te4m]

I have the same problem. The problem I found was in the virtual module.

The plugin uses === when resolving virtual module file names.

In fact, it is possible for a project to have a module name with an absolute path to the project that does not match, so there is no text substitution.

see link

[stefan-karlsson]

@bramdeba remove the viteTsConfigPaths({ root: '../../' }) in your host application and you should be fine.

https://github.com/bramdeba/vite-plugin-federation-issue/blob/3d3ce8563f9be5d0b9e665f507fa8fb766ada8df/apps/host/vite.config.ts#L22C5-L24C8

[nemonemi]

@bramdeba remove the viteTsConfigPaths({ root: '../../' }) in your host application and you should be fine.

https://github.com/bramdeba/vite-plugin-federation-issue/blob/3d3ce8563f9be5d0b9e665f507fa8fb766ada8df/apps/host/vite.config.ts#L22C5-L24C8

That is not an option in my case, because the build fails with

vite v4.3.9 building for development...
✓ 21 modules transformed.
✓ built in 472ms
[originjs:federation] Cannot read properties of undefined (reading 'config')
file: virtual:__federation__

 >  NX   Cannot read properties of undefined (reading 'config')

[marcin-kopanski]

Resolved it!

Seems this is related to the tsconfig.json where baseUrl is not matching the paths.

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "baseUrl": "./src",
    "paths": {
      "src/*": ["*"],
    },
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Thanks!!

[lewisloofis]

Any solution besides this? I use this plugin on monorepo setup so I cannot remove viteTsConfigPaths configuration from my vite

@bramdeba remove the viteTsConfigPaths({ root: '../../' }) in your host application and you should be fine.

https://github.com/bramdeba/vite-plugin-federation-issue/blob/3d3ce8563f9be5d0b9e665f507fa8fb766ada8df/apps/host/vite.config.ts#L22C5-L24C8

[marcin-kopanski]

Resolved it!

Seems this is related to the tsconfig.json where baseUrl is not matching the paths.

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "baseUrl": "./src",
    "paths": {
      "src/*": ["*"],
    },
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Thanks!

[LomyCool]

federation({ name: 'host-app', remotes: { "remote-xxx":"http://localhost:5011/assets/remoteEntry.js", }, shared: ['vue', 'pinia'] }) 我遇到的情况是 remotes 必须要有值，才会被当成宿主app，当实际上我只需要动态加载，remotes不需要赋值 🙅🏻‍♀️ -- The situation I encountered is that remotes must have a value before they can be regarded as the host app. In fact, I only need to load dynamically, and remotes do not need to be assigned a value.