How to implemen plugin Slot MFE in case render widget from other file?

Development
1

Maybe someone has the same case. How to render widget which the function is on another file of plugin.py? in my case, I created ExtraButton` and it placed on `static/header/index.js`. I remains not found the documentation to implement my expectation.

``
PLUGIN_SLOTS.add_items([

(

“all”,

“org.openedx.frontend.authoring.course_outline_header_actions.v1”,

“”"

{

op: PLUGIN_OPERATIONS.Insert,

widget: {

id: 'my-extra-button',

priority: 60,

type: DIRECT_PLUGIN,

RenderWidget: ExtraButton,

},

}

“”"
```

2

@wowothk The plugin slots in the MFEs are inserted via the build pipeline and not directly from the browser. So ideally, you should

  1. publish it as an NPM package

  2. Create a tutor plugin to do the following:

    • Use the "mfe-dockerfile-post-npm-install" patch to install the package using npm
    • Import the package using "mfe-env-config-buildtime-imports" patch
    • Add the plugins to the slot using PLUGIN_SLOTS.add_items

    The last example in the tutor-mfe plugin slots section is a good reference for these 3 steps.

3

yup that’s worked for me. But, is there a way to make it not installed from npm?

4

I don’t think there is way do it without an npm install.

5

anyway, have you tried to publish new package in npm and used in your OpenEdx app? I have a problem. In my case, i got this error. I want to create a new menu option in course authoring header.

```
Minified React error #130
```

6

Thanks @arunmozhi , I solved my issue. Actually we need to understand that each MFE like authn, authoring, and so on might has different React and Paragon version. So, one of the solution we need to ensure that the patch has specific purpose. For me, that trying to update authoring i ensure that the npm installation and importing on `authoring` also

from tutormfe.hooks import PLUGIN_SLOTS
from tutor import hooks

hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-dockerfile-post-npm-install-authoring",
        """
# npm package
RUN npm install wowot-button-package
""",
    )
)

hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-env-config-buildtime-imports",
        """
import { MyButton } from "wowot-button-package";
""",
    )
)



PLUGIN_SLOTS.add_items([
    (
        "authoring",
        "org.openedx.frontend.authoring.course_outline_header_actions.v1",
"""
{
  op: PLUGIN_OPERATIONS.Insert,
  widget: {
    id: 'extra-button',
    priority: 60,
    type: DIRECT_PLUGIN,
    RenderWidget: MyButton,
  },
}
"""
    )
])
7

I am glad your issue is resoove. One thing I forgot about the npm install in my previous post is that you don’t have to actually publish it in the NPM registry, you can do an npm install directly from the Github URL. It will make the job of testing things easier.

1 Like