35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
const { createConfig } = require('@openedx/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 rawAssetRule = {
|
|
resourceQuery: /raw/,
|
|
type: 'asset/source',
|
|
};
|
|
|
|
const otherRules = config.module.rules;
|
|
|
|
config.module.rules = [rawAssetRule, webpack5esmInteropRule, ...otherRules];
|
|
|
|
module.exports = config;
|