MFS override frontend-component-header

Development
1

hi everyone, i’m new in openEdx. I have a trouble in customising header in MFS frontend-app-learning, I changed @edx/frontend-component-header in package.json to “@edx/frontend-component-header”: “file:…/frontend-component-header”, but I have errors Module not found: Can’t resolve ‘@edx/frontend-component-header’ in ‘/openedx/app/src/course-home/goal-unsubscribe’
src/course-home/goal-unsubscribe/GoalUnsubscribe.jsx when i run command tutor dev start --mount=. learning
Thanks every support from you <3

2

Hi @Thanh_Xuan_Vu, this error occurs because the frontend-component-header code isn’t mounted in the docker container.

If you want to test it using tutor dev start --mount=./frontend-app-learning learning, the easiest way is cloning the frontend-component-header inside of frontend-app-learning code, and if you want to make customization and see these changes at runtime use module.config.js

The configuration should look like this:

module.exports = {
    /*
    Modules you want to use from local source code.  Adding a module here means that when this app
    runs its build, it'll resolve the source from peer directories of this app.
  
    moduleName: the name you use to import code from the module.
    dir: The relative path to the module's source code.
    dist: The sub-directory of the source code where it puts its build artifact.  Often "dist".
    */
    localModules: [
        { moduleName: '@edx/frontend-component-header', dir: './frontend-component-header', dist: 'src' }
    ],
}
1 Like