[QUESTION] When using MGT with SPFx 1.19, are the changes in the gulpfile.js still necesary?

[Rafaelki]

Support Question

Hi, My understanding is that the changes in the gulpfile.js are needed because SPFx was using an old version of Webpack. As SPFx 1.19 uses webpack 5, are these changes still needed?

If they are not needed or using webpack 5 has any impact on them, could you please update your sample in https://github.com/pnp/mgt-samples/tree/main/samples/app/sp-webpart to SPFx 1.19.

Related to: #3045

Thanks!

[musale]

Pinging @gavinbarron to shed some light on this :)

[JonoSuave]

I'm running into the same issue

[JonoSuave]

@musale here's what my updated gulpfile looks like that seems to work:

"use strict";

const build = require("@microsoft/sp-build-web");
const path = require("path");

build.addSuppression(
    `Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`
);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
    var result = getTasks.call(build.rig);

    result.set("serve", result.get("serve-deprecated"));

    return result;
};

// add babel-loader and some transforms to handle es2021 language features which are unsupported in webpack 4 by default
const litFolders = [
    `node_modules${path.sep}lit${path.sep}`,
    `node_modules${path.sep}@lit${path.sep}`,
    `node_modules${path.sep}lit-html${path.sep}`,
    `node_modules${path.sep}lit-element${path.sep}`,
];
build.configureWebpack.mergeConfig({
    additionalConfiguration: (generatedConfiguration) => {
        generatedConfiguration.module.rules.push({
            test: /\.js$/,
            // only run on lit packages in the root node_module folder
            include: (resourcePath) => litFolders.some((litFolder) => resourcePath.includes(litFolder)),
            use: {
                loader: "babel-loader",
                options: {
                    plugins: [
                        "@babel/plugin-transform-optional-chaining",
                        "@babel/plugin-transform-nullish-coalescing-operator",
                        "@babel/plugin-transform-logical-assignment-operators",
                    ],
                },
            },
        });
        return generatedConfiguration;
    },
});

build.initialize(require("gulp"));