[BUG/QUESTION] MGT People Picker does not work with SPFx 1.19.0

[vishalshitole]

Describe the bug
We are using MGT People Picker control in our SPFx solution. Per Microsoft documentation, we have added required configurations in gulpfile.js and package.json. It worked fine with SPFx version 1.18.2. But, when we upgraded our solution to SPFx version 1.19.0, it started giving runtime error as shown in the following screenshot.

[!NOTE] Please note that the SPFx solution builds and bundles perfectly fine, but only fails at runtime when web part is added/executed on page. Also, as you can see in the above screenshot, we do not get any specific error message, nor do we get any error in the browser console.

Expected behavior
MGT People Picker should work with SPFx 1.19.0

Environment (please complete the following information):

• Browser: Edge, Chrome
• Framework: SPFx 1.19.0 with React
• Context: SharePoint Online

Additional context

[!IMPORTANT] We use pnpm as a package manager for our solutions.

Please find below our gulpfile.js with required configuration.

"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}.pnpm${path.sep}lit${path.sep}`,
	`node_modules${path.sep}.pnpm${path.sep}@lit${path.sep}`,
	`node_modules${path.sep}.pnpm${path.sep}lit-html${path.sep}`,
	`node_modules${path.sep}.pnpm${path.sep}lit-element${path.sep}`,
  `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"));

Also, we have added following packages as dev dependencies in our package.json.

"@babel/plugin-transform-logical-assignment-operators": "^7.25.8",
"@babel/plugin-transform-nullish-coalescing-operator": "^7.25.8",
"@babel/plugin-transform-optional-chaining": "^7.25.8",
"babel-loader": "8.3.0",

[musale]

hello @vishalshitole, I have been looking into this and put up pnp/mgt-samples#25 that:

• removes the code that uses babel transforms on lit html files.
• Updates SPFx to 1.20+

My understanding is that this code was put in to transform the lit files to handle es2021 language features which are unsupported in webpack 4 by default. However, on webpack v5+ this is not necessary. From v1.19 of SPFx webpack v5 is used. Therefore, this workaround isn't necessary.

Could you remove the code that transforms the lit files as well as the babel deps and retry?

[vishalshitole]

@musale Thank you for your response.

I have tried removing the code that transforms the lit files and babel dependencies from my SPFx 1.19.0 solution. However, it still does not work and gives same error.

[musale]

@vishalshitole the only difference here is you're using pnpm. Let me repro with that and circle back asap.