How to build production MFE frontend-component-header

There are what I’ve done:

  • Forked the frontend-component-header repo
  • Made the changes
  • My plugins file is:
from tutor import hooks


hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-dockerfile-post-npm-install",
        f"""
RUN npm install '@edx/frontend-component-header@git+https://gitlab.com/xxx_open_edx/frontend-component-header.git'
""",
    ),
)
  • Rebuilt: tutor images build openedx mfe --no-cache
  • The logs return:
1.286 > @edx/frontend-app-learning@1.0.0-semantically-released build
1.286 > fedx-scripts webpack
1.286 
1.333 Running with resolved config:
1.333 /openedx/app/webpack.prod.config.js
1.333 
2.266 Browserslist: caniuse-lite is outdated. Please run:
2.266   npx update-browserslist-db@latest
2.266   Why you should do it regularly: https://github.com/browserslist/update-db#readme
3.173 Failed to load /openedx/app/.env.
106.8 Error parsing bundle asset "/openedx/app/dist/475.e09ace9a6dfe72e8f4c1.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/app.7f7f20d902268b14dc47.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/216.45fe4776bd50b67d4f15.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/700.5cffb78f9a20e01ba194.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/35.748a72791af8fd5f6a6b.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/106.ad15e599c40228db320e.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/runtime.b9a4249fc36dc77e876e.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/210.f5a70901e714ae4d24c2.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/974.266021e4ab1c31eb7060.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/159.b7d27609fce09260e712.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/437.4382cf91d1ab96d684e5.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/724.9df859b1afcf09dcdd69.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/715.4a69e9d9d483eb5e318b.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/901.3c2fb7494896ae24f37f.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/28.6fb223466e052b6470d7.js": no such file
106.8 Error parsing bundle asset "/openedx/app/dist/443.7d4b7dead5ef7f7c034b.js": no such file
106.8 
106.8 No bundles were parsed. Analyzer will show only original module sizes from stats file.
106.8 
106.9 Webpack Bundle Analyzer saved report to /openedx/app/dist/report.html
107.3 assets by status 6.93 MiB [cached] 38 assets
107.3 Entrypoint app = runtime.b9a4249fc36dc77e876e.js 475.e09ace9a6dfe72e8f4c1.css 475.e09ace9a6dfe72e8f4c1.js app.7f7f20d902268b14dc47.css app.7f7f20d902268b14dc47.js 22 auxiliary assets
107.3 orphan modules 5.29 MiB [orphan] 3102 modules
107.3 runtime modules 7.95 KiB 15 modules
107.3 cacheable modules 8.66 MiB (javascript) 1.03 MiB (css/mini-extract)
107.3   modules by path ./node_modules/ 7.52 MiB (javascript) 0 bytes (css/mini-extract)
107.3     javascript modules 7.41 MiB 1062 modules
107.3     json modules 115 KiB 26 modules
107.3     css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./node_modules/@edx/paragon/scss/core/_exports.module.scss 0 bytes [built] [code generated]
107.3   modules by path ./src/ 1.14 MiB (javascript) 1.03 MiB (css/mini-extract)
107.3     javascript modules 1.14 MiB 38 modules
107.3     css modules 1.03 MiB
107.3       modules by path ./src/course-home/ 515 KiB 2 modules
107.3       css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./src/index.scss 534 KiB [built] [code generated]
107.3       css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./src/courseware/course/Course.scss 2.67 KiB [built] [code generated]
107.3   readable-stream (ignored) 15 bytes [built] [code generated]
107.3 
107.3 WARNING in ./node_modules/react-responsive/dist/react-responsive.js
107.3 Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
107.3 Failed to parse source map: 'webpack:///dist/react-responsive.js' URL is not supported
107.3  @ ./node_modules/@edx/paragon/dist/index.js 111:0-102 111:0-102 111:0-102 111:0-102
107.3  @ ./src/course-home/progress-tab/ProgressTab.jsx
107.3  @ ./src/index.jsx 22:0-65 99:46-57
107.3 
107.3 1 warning has detailed information that is not shown.
107.3 Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
107.3 
107.3 ERROR in ./src/course-home/goal-unsubscribe/GoalUnsubscribe.jsx 5:0-74
107.3 Module not found: Error: Can't resolve '@edx/frontend-component-header' in '/openedx/app/src/course-home/goal-unsubscribe'
107.3  @ ./src/course-home/goal-unsubscribe/index.jsx 1:0-48 2:15-30
107.3  @ ./src/index.jsx 21:0-61 50:25-40
107.3 
107.3 ERROR in ./src/generic/CourseAccessErrorPage.jsx 7:0-74
107.3 Module not found: Error: Can't resolve '@edx/frontend-component-header' in '/openedx/app/src/generic'
107.3  @ ./src/index.jsx 30:0-68 56:25-46
107.3 
107.3 ERROR in ./src/index.jsx 9:0-76
107.3 Module not found: Error: Can't resolve '@edx/frontend-component-header' in '/openedx/app/src'
107.3 
107.3 ERROR in ./src/tab-page/TabPage.jsx 16:0-74
107.3 Module not found: Error: Can't resolve '@edx/frontend-component-header' in '/openedx/app/src/tab-page'
107.3  @ ./src/tab-page/index.js 2:0-47 2:0-47
107.3  @ ./src/index.jsx 23:0-42 59:42-54 67:42-54 75:42-54 83:42-54 95:41-53 104:42-54
107.3 
107.3 4 errors have detailed information that is not shown.
107.3 Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
107.3 
107.3 webpack 5.82.0 compiled with 4 errors and 1 warning in 101623 ms

What am I doing wrong?

Clone the same package at npm and compare with your git repo to see the differences.
Run npm build and try to make your project look the same as npm, commit to git or publish to npm.

1 Like