2387d621d7
[MICROBA-1743] Fixes an issue where we couldn't override the header and footer with the branded versiom within the Comms MFE because some of the dependencies of the branded components are not currently Webpack5 compliant. Adds a rule to make webpack5 less strict with imports that do not include a file extension. This also includes a change so that the Comms MFE uses the Open edX branded colors/styles by default.
30 lines
1.0 KiB
JavaScript
30 lines
1.0 KiB
JavaScript
const { createConfig } = require('@edx/frontend-build');
|
|
|
|
const config = createConfig('webpack-dev');
|
|
|
|
/**
|
|
* Webpack5 is now stricter when evaluating import statements. By default, Webpack5 expects import statements to include
|
|
* file extensions now.
|
|
*
|
|
* We want to be able to support overriding and injecting a branded header and footer in the MFE. However, the header
|
|
* and footer components have dependencies using older versions of Babel that are not Webpack5 compliant.
|
|
*
|
|
* This rule allows us to workaround the issue by telling Webpack to not be so strict.
|
|
*
|
|
* The solution is pulled from
|
|
* https://stackoverflow.com/questions/65922329/babel-cant-resolve-imports-in-it-its-own-source-code and more details
|
|
* can be found here: https://github.com/webpack/webpack/issues/11467#issuecomment-808618999/
|
|
*/
|
|
const webpack5esmInteropRule = {
|
|
test: /\.m?js/,
|
|
resolve: {
|
|
fullySpecified: false,
|
|
},
|
|
};
|
|
|
|
const otherRules = config.module.rules;
|
|
|
|
config.module.rules = [webpack5esmInteropRule, ...otherRules];
|
|
|
|
module.exports = config;
|