Problem description.
During the upgrade of my local Tutor installation from version 19 to version 20, I encountered a frontend build failure that prevented the successful execution of the tutor dev launch command.
Environment details:
- Previous Version: Tutor v19
- Target Version: Tutor v20
- Command:
tutor dev launch - Platform: Local development environment
- Affected Component: MFE (Micro Frontend) - Learner Dashboard
The full error message:
> [learner-dashboard-prod 1/1] RUN npm run build:
0.319
0.319 > @edx/frontend-app-learner-dashboard@0.0.1 build
0.319 > fedx-scripts webpack
0.319
0.353 Running with resolved config:
0.353 /openedx/app/webpack.prod.config.js
0.353
38.60 Error parsing bundle asset "/openedx/app/dist/605.5fe95e206c6c8b48e730.js": no such file
38.60 Error parsing bundle asset "/openedx/app/dist/app.3fe555ff63e756562cee.js": no such file
38.60 Error parsing bundle asset "/openedx/app/dist/617.4a3883a2962b84f4ff7e.js": no such file
38.60 Error parsing bundle asset "/openedx/app/dist/runtime.d350b1af4e7e5c87e2e3.js": no such file
38.60
38.60 No bundles were parsed. Analyzer will show only original module sizes from stats file.
38.60
38.67 Webpack Bundle Analyzer saved report to /openedx/app/dist/report.html
38.88 assets by status 3.83 MiB [cached] 15 assets
38.88 Entrypoint app = runtime.d350b1af4e7e5c87e2e3.js 605.5fe95e206c6c8b48e730.css 605.5fe95e206c6c8b48e730.js app.3fe555ff63e756562cee.css app.3fe555ff63e756562cee.js 9 auxiliary assets
38.88 Entrypoint paragon.theme.core = runtime.d350b1af4e7e5c87e2e3.js paragon-theme-core.0f15e2d16a779186290b.css 2 auxiliary assets
38.88 Entrypoint paragon.theme.variants.light = runtime.d350b1af4e7e5c87e2e3.js paragon-theme-variants-light.82a1e4adbb599e75cbc0.css 2 auxiliary assets
38.88 orphan modules 5.4 MiB [orphan] 3555 modules
38.88 runtime modules 8.9 KiB 16 modules
38.88 built modules 6.53 MiB (javascript) 809 KiB (css/mini-extract) [built] 1177 modules
38.88
38.88 ERROR in ./src/App.scss
38.88 Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
38.88 ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
38.88 Undefined variable.
38.88 ╷
38.88 96 │ background: $component-active-bg;
38.88 │ ^^^^^^^^^^^^^^^^^^^^
38.88 ╵
38.88 node_modules/@edx/frontend-component-header/dist/index.scss 96:19 @import
38.88 src/App.scss 9:9 root stylesheet
38.88 at processResult (/openedx/app/node_modules/webpack/lib/NormalModule.js:936:19)
38.88 at /openedx/app/node_modules/webpack/lib/NormalModule.js:1084:5
38.88 at /openedx/app/node_modules/loader-runner/lib/LoaderRunner.js:400:11
38.88 at /openedx/app/node_modules/loader-runner/lib/LoaderRunner.js:252:18
38.88 at context.callback (/openedx/app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
38.88 at Object.loader (/openedx/app/node_modules/sass-loader/dist/index.js:63:5)
38.88 @ ./src/App.jsx 25:0-20
38.88 @ ./src/index.jsx 12:0-24 25:42-45
38.88
38.88 1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
38.88 webpack 5.99.9 compiled with 2 errors in 35016 ms
------
Dockerfile:543
--------------------
541 | FROM learner-dashboard-common AS learner-dashboard-prod
542 | ENV NODE_ENV=production
543 | >>> RUN npm run build
544 |
545 |
--------------------
ERROR: failed to build: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1
View build details: docker-desktop://dashboard/build/desktop-linux/desktop-linux/kt1bjdpez5g2nu8m3kfnf2dum
Error: Command failed with status 1: docker buildx build --tag=docker.io/overhangio/openedx-mfe:20.0.0-main-indigo --output=type=docker --cache-from=type=registry,ref=docker.io/overhangio/openedx-mfe:20.0.0-main-indigo-cache /Users/jacobo.dominguez/Library/Application Support/tutor-main/env/plugins/mfe/build/mfe
Root Cause: The error indicates that the $component-active-bg SASS variable is undefined during the build process, suggesting a compatibility issue between the Indigo theme plugin and the new Tutor v20 frontend build system.
This problem is already identified and documented on this Github issues:
Solution
The issue was successfully resolved by disabling the Indigo plugin, which appears to have compatibility issues with Tutor v20’s updated frontend build process.
Steps to resolve:
-
Disable the Indigo plugin:
tutor plugins disable indigo -
Launch development environment:
tutor dev launch
NOTE: This might be a temporary solution since disabling Indigo allows the upgrade to proceed, but you’ll lose the Indigo theming, check for Indigo plugin updates that address this issue before re-enabling.
