MFE Local Development Setup

Development
1

I’m trying to configure a local development setup for MFEs. I went through the following steps to setup local instances of the header and footer components. Created a module.config.js to point to them but it seems that the scripts can’t pick up the scss.

Error log

edx.devstack.frontend-app-learning | ERROR in ./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--5-4!./src/index.scss)
edx.devstack.frontend-app-learning | Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
edx.devstack.frontend-app-learning | SassError: Can't find stylesheet to import.
edx.devstack.frontend-app-learning |   ���
edx.devstack.frontend-app-learning | 4 ��� @import "~@edx/frontend-component-header/dist/index";
edx.devstack.frontend-app-learning |   ���         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
edx.devstack.frontend-app-learning |   ���
edx.devstack.frontend-app-learning |   src/index.scss 4:9  root stylesheet
edx.devstack.frontend-app-learning |  @ ./src/index.scss 2:26-248 22:4-35:5 25:25-247
edx.devstack.frontend-app-learning |  @ ./src/index.jsx
edx.devstack.frontend-app-learning |
edx.devstack.frontend-app-learning | ERROR in ./src/index.jsx
edx.devstack.frontend-app-learning | Module not found: Error: Can't resolve '@edx/frontend-component-footer' in '/edx/app/frontend-app-learning/src'
edx.devstack.frontend-app-learning |  @ ./src/index.jsx 9:0-84 57:40-46 85:42-56
edx.devstack.frontend-app-learning |
edx.devstack.frontend-app-learning | ERROR in ./src/index.jsx
edx.devstack.frontend-app-learning | Module not found: Error: Can't resolve '@edx/frontend-component-header' in '/edx/app/frontend-app-learning/src'
edx.devstack.frontend-app-learning |  @ ./src/index.jsx 8:0-76 85:26-40

Setup Steps

Create a folder in the workspace for custom layouts. In the workspace folder run:
mkdir dicey
Within the workspace/dicey folder check out the custom layouts:
git clone https://github.com/Dicey-Tech/frontend-component-footer-educate
git clone https://github.com/Dicey-Tech/frontend-component-header-educate

Within the workspace/devstack folder edit docker-compose-host.yml and add the workspace/dicey folder as an additional volume, mapping it to the /edx/app/dicey folder in the container:

      frontend-app-learning:
        volumes:
          - ${DEVSTACK_WORKSPACE}/frontend-app-learning:/edx/app/frontend-app-learning:cached
          - frontend_app_learning_node_modules:/edx/app/frontend-app-learning/node_modules
          - ${DEVSTACK_WORKSPACE}/dicey:/edx/app/dicey

Within the workspace/frontend-app-learning folder, create a new file called module.config.js, configuring the build environment to pickup the @edx/frontend-component-footer dependency from the folder mapped above:
Note: the following doesn’t work due to a issue with resolving where the @edx/frontend-component-footer scss file is located. I’ve tried a number of combinations of settings.

module.exports = {
  localModules: [
     { moduleName: '@edx/frontend-component-footer', dir: '../dicey/frontend-component-footer-educate', dist: 'dist' },
     { moduleName: '@edx/frontend-component-footer/dist', dir: '../dicey/frontend-component-footer-educate/dist', dist: 'scss' }  ],
};
2

@BbrSofiane, I’ve been in a similar situation when developing the library authoring MFE, and at the time the only way I got around it was by copying the files I wanted changed directly into the container. I’m sure there must be a better way - I just don’t know what it is.

Which is to say, I’ll be following this thread to see if the proper solution pops up. :wink:

3

@arbrandes, @djoy helped me troubleshoot it! I forgot to post the solution here so thanks for the reminder.

I had to change module.config.js to

module.exports = {
  localModules: [
     { moduleName: '@edx/frontend-component-footer', dir: '../dicey/frontend-component-footer-educate'}
};

And run npm build in the local component directory to generate the dist folder.

2 Likes