Authn mfe dependency issue (with tutor in development env)

[Faizan_Shaikh]

Hi, I want to override the @frontend-app-authn mfe and use the @edx/brand-edx package to customize the login page to remove the register button and page and make changes to the css of the page.

Tutor version: 17.0.5
MFE version: 17.0.1

Redirecting to login page:
I used the admin portal to redirect the lms user to login page.

Removing public registration functionality:
I created a tutor plugin to do this and it work fine.

Then, I did the following:

1. Fork frontend-app-authn repo
2. Clone repo to local computer

1. cd dev-env
2. git clone https://github.com/my-repo/frontend-app-authn.git

3. Bind-mount folder

1. tutor mounts add dev-env/frontend-app-authn
2. tutor mounts list

4. Fork openedx/brand repo
5. Clone repo to local computer

1. cd .local/share/tutor/env/build/openedx/themes
2. git clone https://github.com/my-repo/my-brand.git # this is the edx/brand-edx repo

6. Start my environment

tutor dev start authn

The cms is working but the lms site can’t be reached.

When I see the authn logs using tutor dev log authn, I get this:

So, I thought that the dependencies are not installed. Therefore I installed npm in the frontend-app-authn directory that I had cloned.

cd dev-env/frontend-app-authn
npm install
There were some warning of deprecation but no errors.

Then I did

tutor config save
tutor images build authn
tutor dev start
and got a new error:

This is what a complete section of the authn logs looks like:

@edx/frontend-app-authn@0.1.0 start
authn-1 | > fedx-scripts webpack-dev-server --progress --config ./webpack.dev-tutor.config.js
authn-1 |
authn-1 | [webpack-cli] Failed to load ‘/openedx/app/webpack.dev-tutor.config.js’ config
authn-1 | [webpack-cli] Error: Cannot find module ‘@edx/frontend-build/config/webpack.dev.config.js’
authn-1 | Require stack:
authn-1 | - /openedx/app/webpack.dev-tutor.config.js
authn-1 | - /openedx/app/node_modules/webpack-cli/lib/webpack-cli.js
authn-1 | - /openedx/app/node_modules/webpack-cli/lib/bootstrap.js
authn-1 | - /openedx/app/node_modules/webpack-cli/bin/cli.js
authn-1 | - /openedx/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js
authn-1 | - /openedx/app/node_modules/@openedx/frontend-build/bin/fedx-scripts.js
authn-1 | at Module._resolveFilename (node:internal/modules/cjs/loader:1134:15)
authn-1 | at Module._load (node:internal/modules/cjs/loader:975:27)
authn-1 | at Module.require (node:internal/modules/cjs/loader:1225:19)
authn-1 | at require (node:internal/modules/helpers:177:18)
authn-1 | at Object. (/openedx/app/webpack.dev-tutor.config.js:7:7)
authn-1 | at Module._compile (node:internal/modules/cjs/loader:1356:14)
authn-1 | at Module._extensions…js (node:internal/modules/cjs/loader:1414:10)
authn-1 | at Module.load (node:internal/modules/cjs/loader:1197:32)
authn-1 | at Module._load (node:internal/modules/cjs/loader:1013:12)
authn-1 | at Module.require (node:internal/modules/cjs/loader:1225:19) {
authn-1 | code: ‘MODULE_NOT_FOUND’,
authn-1 | requireStack: [
authn-1 | ‘/openedx/app/webpack.dev-tutor.config.js’,
authn-1 | ‘/openedx/app/node_modules/webpack-cli/lib/webpack-cli.js’,
authn-1 | ‘/openedx/app/node_modules/webpack-cli/lib/bootstrap.js’,
authn-1 | ‘/openedx/app/node_modules/webpack-cli/bin/cli.js’,
authn-1 | ‘/openedx/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js’,
authn-1 | ‘/openedx/app/node_modules/@openedx/frontend-build/bin/fedx-scripts.js’

I am not exactly sure but I think it cannot find the repo @edx/frontend-build because it has been moved to @openedx/frontend-build. To begin with, I do not understand why it is trying to find the @edx/frontend-build repo. I think it should try to find the @openedx/frontend-build. If this is how it should work, how can I fix this issue. I am new to openedx and tutor and I am not sure if I am missing something or doing something wrong. I need help fixing this issue.
Thank you in advance.

[vivek (Vivek Singh Rajawat)]

hi @Faizan_Shaikh ,
Run this command
tutor dev run authn bash -c "npm install webpack-dev-server --save-dev"
i think it is because of webpack module

[Faizan_Shaikh]

Thanks for the reply Vivek. I will try this and then let you know if this worked or not.

[Faizan_Shaikh]

Thank you for the answer. This actually worked. I wonder why this happened in the first place. @regis , am I doing something wrong or does this happen to everyone?

Update: I am using Redwood 1 instead of Quince as mentioned earlier.
Just for context, this is what the logs look like after the applying the solution.

thisuser@thisDevice:~$ tutor dev logs authn
docker compose -f /home/thisuser/.local/share/tutor/env/local/docker-compose.yml -f /home/thisuser/.local/share/tutor/env/dev/docker-compose.yml --project-name tutor_dev logs authn
authn-1  |
authn-1  | > @edx/frontend-app-authn@0.1.0 start
authn-1  | > fedx-scripts webpack-dev-server --progress --config ./webpack.dev-tutor.config.js
authn-1  |
authn-1  | No local module configuration file found. This is fine.
authn-1  | <i> [webpack-dev-server] [HPM] Proxy created: /api/mfe_config/v1  -> http://local.edly.io:8000
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:2101/
<i> [webpack-dev-server] Content not from webpack is served from '/openedx/app/public' directory
<i> [webpack-dev-server] 404s will fallback to '/authn/index.html'
assets by info 955 bytes [immutable]
authn-1  |   asset 24068215015af53c8a67fa1c36d8f0a9.png 613 bytes [emitted] [immutable] [from: node_modules/@openedx/paragon/dist/Card/fallback-default.png] (auxiliary name: app)
authn-1  |   asset 95ec738c0b7faac5b5c9126794446bbd.svg 342 bytes [emitted] [immutable] [from: node_modules/@openedx/paragon/dist/Avatar/default-avatar.svg]
authn-1  | asset app.js 22 MiB [emitted] (name: app)
authn-1  | asset index.html 770 bytes [emitted]
authn-1  | orphan modules 4.6 MiB [orphan] 2703 modules
authn-1  | runtime modules 29.7 KiB 16 modules
authn-1  | cacheable modules 7.23 MiB
authn-1  |   modules by path ./node_modules/ 4.97 MiB
authn-1  |     javascript modules 4.9 MiB 1495 modules
authn-1  |     json modules 63.9 KiB
authn-1  |       ./node_modules/i18n-iso-countries/langs/ar.json 4.52 KiB [built] [code generated]
authn-1  |       ./node_modules/i18n-iso-countries/langs/en.json 4.64 KiB [built] [code generated]
authn-1  |       ./node_modules/i18n-iso-countries/langs/es.json 4.57 KiB [built] [code generated]
authn-1  |       ./node_modules/i18n-iso-countries/langs/fr.json 4.54 KiB [built] [code generated]
authn-1  |       ./node_modules/i18n-iso-countries/langs/zh.json 2.91 KiB [built] [code generated]
authn-1  |       ./node_modules/i18n-iso-countries/langs/ca.json 4.46 KiB [built] [code generated]
authn-1  |       + 8 modules
authn-1  |   modules by path ./src/ 2.27 MiB 138 modules
authn-1  |   env.config (ignored) 15 bytes [built] [code generated]
authn-1  | webpack 5.89.0 compiled successfully in 23564 ms

[Syed_Muhammad_Dawoud (Syed Muhammad Dawoud Sheraz Ali)]

did you build authn-dev image? I see you used start instead of launch. start does not build the images, which could be reason for 2nd error. For fedx-scripts, yes, you need to run npm install in the cloned MFE directory.

[Faizan_Shaikh]

Ah I see. I thought doing npm install wasn’t required when using tutor so I didn’t run npm install inside the mfe folder.
I later also tried to setup the learner-dashboard mfe locally and had no issues after running the npm install command.

Thank you for the insight. Best
Faizan