reactjs - MicroFrontends with React - I get `ReferenceError: __rf_placeholder__shareScope is not defined` in one host, but on an

admin管理员组

文章数量:1289876

Context

I have three React apps, build with Vite and Typescript. They have one and the same version of React, Typescript, etc. They are <Form />, <MessagesSystem /> and <HostApp />. On all three of them I have installed the vite module federation plugin.

So - my goal is to load <Form /> as micro-frontend into <MessageSystem />, and then <MessageSystem /> into <HostApp />.

I can successfully use <Form /> or <MessageSystem /> into <HostApp />. However, when I try to use <Form /> into <MessageSystem /> - I get this error:

ReferenceError: __rf_placeholder__shareScope is not defined.

Possible causes I've thought about

1. Inside <MessageSystem /> the <Form /> renders only under certain action. Could it be that it is not in the component tree initially and that's why it won't work? Cause in the working scenarios I render the micro frontend directly, not after some action ...
2. In the vite module-federation plugin configuration in <MessageSystem /> I have configuration for using <Form />, but also for exposing <MessageSystem /> as microfrontend at the same time ... could it be related to this?

Additional info

In both <Form /> and <MessagesSystem /> I have this in tsconfig file:

    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@icons/*": ["src/assets/icons/*"],
      "@img/*": ["src/assets/img/*"],
      "@audio/*": ["src/assets/audio/*"],
      "@i18n": ["src/i18n/index.ts"],
      "@utils/*": ["src/utils/*"],
      "@pages/*": ["src/pages/*"],
      "@layouts/*": ["src/layouts/*"],
      "@state/*": ["src/state/*"],
      "@state": ["src/state/index.tsx"],
      "@typeDefinitions/*": ["src/typeDefinitions/*"],
      "@/*": ["src/*"]
    }

I am mentioning that because on other issues I saw the problem is that baseUrl doesn't match paths ... whatever that means ...

Other approaches

I tried to export a simpler component, with just a button, to debug more - but got the same error.

Context

I have three React apps, build with Vite and Typescript. They have one and the same version of React, Typescript, etc. They are <Form />, <MessagesSystem /> and <HostApp />. On all three of them I have installed the vite module federation plugin.

So - my goal is to load <Form /> as micro-frontend into <MessageSystem />, and then <MessageSystem /> into <HostApp />.

I can successfully use <Form /> or <MessageSystem /> into <HostApp />. However, when I try to use <Form /> into <MessageSystem /> - I get this error:

ReferenceError: __rf_placeholder__shareScope is not defined.

Possible causes I've thought about

1. Inside <MessageSystem /> the <Form /> renders only under certain action. Could it be that it is not in the component tree initially and that's why it won't work? Cause in the working scenarios I render the micro frontend directly, not after some action ...
2. In the vite module-federation plugin configuration in <MessageSystem /> I have configuration for using <Form />, but also for exposing <MessageSystem /> as microfrontend at the same time ... could it be related to this?

Additional info

In both <Form /> and <MessagesSystem /> I have this in tsconfig file:

    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@icons/*": ["src/assets/icons/*"],
      "@img/*": ["src/assets/img/*"],
      "@audio/*": ["src/assets/audio/*"],
      "@i18n": ["src/i18n/index.ts"],
      "@utils/*": ["src/utils/*"],
      "@pages/*": ["src/pages/*"],
      "@layouts/*": ["src/layouts/*"],
      "@state/*": ["src/state/*"],
      "@state": ["src/state/index.tsx"],
      "@typeDefinitions/*": ["src/typeDefinitions/*"],
      "@/*": ["src/*"]
    }

I am mentioning that because on other issues I saw the problem is that baseUrl doesn't match paths ... whatever that means ...

Other approaches

I tried to export a simpler component, with just a button, to debug more - but got the same error.

• reactjs
• vite
• micro-frontend
• vite-module-federation

Share Improve this question Follow edited Feb 21 at 8:56 jps 22.6k1616 gold badges8888 silver badges106106 bronze badges asked Feb 21 at 6:57 pesho hristovpesho hristov 2,06022 gold badges2727 silver badges5151 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I found out that the problem was in using tsconfigPath plugin for vite.

We used that plugin so we don't have those aliases defined in two places - tsconfig json and vite config, and vite config was reading/using the paths form tsconfig json and was setting them as aliases internally.

So at the end of the day I restored the configurations in vite config - something like this:

resolve: {
    alias: {
        '@components': path.resolve(__dirname, './src/components'),
        '@icons': path.resolve(__dirname, './src/assets/icons'),
        '@img': path.resolve(__dirname, './src/assets/img'),
        '@audio': path.resolve(__dirname, './src/assets/audio'),
        '@i18n': path.resolve(__dirname, './src/i18n'),
        '@state': path.resolve(__dirname, './src/state'),
        '@utils': path.resolve(__dirname, './src/utils'),
        '@pages': path.resolve(__dirname, './src/pages'),
        '@layouts': path.resolve(__dirname, './src/layouts'),
        '@typeDefinitions': path.resolve(
            __dirname,
            './src/typeDefinitions',
        ),
        '@': path.resolve(__dirname, './src'),
    },

Basically these aliases in vite config are following the configurations in tsconfig json - and then the __rf_placeholder__shareScope error disappeared.

本文标签：