Dependency issues when trying to modify MFE Header

Development Design
, ,
1

Hi all!

I’m trying to modify the MFE header. I have tutor 16.1.8, I have made a fork of the header repo and made some little change just for testing. I have include my repo in a plugin as is tell in tutor-mfe, I have tutor-mfe plugin version 16.1.3 enabled.

My plugin looks like the one in the doc:

from tutor import hooks

hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-dockerfile-post-npm-install",
        """
# git repository
RUN npm install '@edx/frontend-component-header@git+https://github.com/[gituser]/frontend-component-header.git'
"""
    )
)

If I try with the more recient tags of the header repo, when I run the build command (tutor images build mfe) I have some dependency problems like this:

23.95 npm ERR! code ERESOLVE
23.96 npm ERR! ERESOLVE unable to resolve dependency tree
23.96 npm ERR! 
23.96 npm ERR! While resolving: @edx/frontend-app-ora-grading@0.0.1
23.96 npm ERR! Found: @edx/frontend-platform@2.6.2
23.96 npm ERR! node_modules/@edx/frontend-platform
23.96 npm ERR!   @edx/frontend-platform@"^2.5.1" from the root project
23.96 npm ERR! 
23.96 npm ERR! Could not resolve dependency:
23.96 npm ERR! peer @edx/frontend-platform@"^4.0.0 || ^5.0.0 || ^6.0.0" from @edx/frontend-component-header@1.0.0-semantically-released
23.96 npm ERR! node_modules/@edx/frontend-component-header
23.96 npm ERR!   @edx/frontend-component-header@"git+https://github.com/[gituser]/frontend-component-header.git#b4.11.1" from the root project

And if I try with an older tag the result is this:

25.58 npm ERR! While resolving: @edx/frontend-app-profile@1.0.0-semantically-released
25.58 npm ERR! Found: @edx/frontend-platform@4.2.0
25.58 npm ERR! node_modules/@edx/frontend-platform
25.58 npm ERR!   @edx/frontend-platform@"4.2.0" from the root project
25.58 npm ERR! 
25.58 npm ERR! Could not resolve dependency:
25.58 npm ERR! peer @edx/frontend-platform@"^2.0.0 || ^3.0.0" from @edx/frontend-component-header@1.0.0-semantically-released
25.58 npm ERR! node_modules/@edx/frontend-component-header
25.58 npm ERR!   @edx/frontend-component-header@"git+https://github.com/[gituser]/frontend-component-header.git#b3.6.5" from the root project

Please, could you please give me any suggestion of which header branch or tag should I use that works with my tutor version or any other suggestion to solve my issue?

Thank you very much

2

@crperez Were you able to solve this issue? I’m running into the exact same error message.

3

Hi @twlichty !

I wanted to share the versions and steps I used:

Tutor version: 17.0.2

I forked the frontend-component-header and started making changes from this commit from January the 28th

After some trial and error, I got it to work :confused:

Here’s what my plugin looks like:

from tutor import hooks

hooks.Filters.ENV_PATCHES.add_items([
    (
        "mfe-dockerfile-post-npm-install",
        """
        # git repository
        RUN npm install '@edx/frontend-component-header@git+https://github.com/[usuario]/frontend-component-header.git'
        """
    )
])

Hope this helps, and sorry for the delay!

4

Hello Crperez
If you want to modify the frontend-component-header you have to do the following:
After cloning the repo locally, you do

  • npm install
    After making the different changes you make
  • npm run build
    Change in the package.json of the frontend that you are going to show the header, for example in the frontend-app-learning
    (only on the local instance and DO NOT commit this file)
    Replacing the line that imports it with the following:
    “@edx/frontend-component-header”: “file:…/frontend-component-header”,

From the frontend folder to mount:

  • frontend-app-learning (For example)
  • npm install ‘@edx/frontend-component-header@…/frontend-component-header’

This way you will see the changes locally and then you can upload the header changes to your branch.