Customising frontend-component-header in tutor 15.3.7 local

Development
,
1

I’m trying to customize the frontend-component-header and am running into the following error when running tutor local on my laptop:

The web page displays the error message:

"An unexpected error occurred. Please click the button below to refresh the page. "

Opening the Chrome devtools console shows:

react-dom.production.min.js:209 Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
    at f (utils.js:76:15)
    at l (utils.js:6:5)
    at injectIntl.js:18:13
    at yl (react-dom.production.min.js:268:137)
    at pc (react-dom.production.min.js:246:265)
    at fc (react-dom.production.min.js:246:194)
    at nc (react-dom.production.min.js:239:172)
    at _l (react-dom.production.min.js:230:137)
    at Tc (react-dom.production.min.js:281:43)
    at react-dom.production.min.js:284:301
rl @ react-dom.production.min.js:209

Here is what I have done:

  1. Cloned GitHub - openedx/frontend-component-header at v4.0.0 into a directory on my laptop.
  2. Made a small change to the AnonymousUserMenu.jsx file.
  3. Ran npm install and then npm run build in the ~/code/frontend-component-header directory.
  4. Copied the ~/code/frontend-component-header directory to ~/.local/share/tutor/env/plugins/mfe/build/mfe/comps
  5. Wrote, installed and enabled a plugin to install this component:
hooks.Filters.ENV_PATCHES.add_items(
    [
        ("mfe-dockerfile-post-npm-install",
        """
RUN mkdir -p /openedx/comps
COPY ./comps /openedx/comps
RUN npm install '@edx/brand@git+https://BRAND_GIT_REPO'
RUN npm install '@edx/frontend-component-header@/openedx/comps/frontend-component-header'
        """
        )
    ]
)
  1. Rebuilt all images: tutor images build openedx mfe --no-cache

Not sure if this matters but I have also disabled a number of MFEs in my config.yml file:

MFE_ACCOUNT_MFE_APP: null
MFE_AUTHN_MFE_APP: null
MFE_DISCUSSIONS_MFE_APP: null
MFE_PROFILE_MFE_APP: null

And am running a customized learning mfe:

MFE_LEARNING_MFE_APP:
  name: learning
  port: 2000
  repository: GIT_REPO_URL
  version: main

Anyone have any thoughts on what I am doing wrong?

2

Does anyone have any insight into what we may be doing wrong?