Transition from gulp to heft with polyfills

[JamesDerrickHH]

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• spfx v1.22.1

Issue description

Hi, just looking to get some advice, I'm taking a first look at upgrading a webpart from an older version of spfx to the latest, meaning I'm transitioning from gulp to heft.
My solution's gulpfile includes a fair few polyfills and I cannot work out how to get the same behaviour in heft. I'm assuming I need a heft.json file in my config folder but beyond that I'm very confused.
This was my gulpfile

'use strict';

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

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;
};

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.module.rules.push(
      {
        resolve: {
          fallback: {
            fs: require.resolve("graceful-fs"),
            stream: require.resolve("stream-browserify"),
            path: require.resolve("path-browserify"),
            buffer: require.resolve("buffer"),
            crypto: false,
            constants: false,
            util: false,
            child_process: false,
            assert: false
          }
        }
      }
    );

    generatedConfiguration.plugins.push(
      new webpack.ProvidePlugin({
        process: "process/browser",
        Buffer: ["buffer", "Buffer"]
      }),
      new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
        const mod = resource.request.replace(/^node:/, "");
        switch (mod) {
            case "path":
                resource.request = "path";
                break;
            case "fs":
                resource.request = "fs";
                break;
            case "buffer":
                resource.request = "buffer";
                break;
            case "stream":
                resource.request = "readable-stream";
                break;
            default:
                throw new Error(`Not found ${mod}`);
        }
      }),
    )

    return generatedConfiguration;
  }
});

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

Any bit of guidance would be greatly appreciated

[Ashlesha-MSFT]

Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.
If you don’t receive a reply within two working days, please use this escalation form to escalate.

[JamesDerrickHH]

Might be useful for others but I think I have it working
I added a webpack-patch.json file to the config folder

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/spfx-build/webpack-patch.schema.json",
  "patchFiles": [
    "./config/webpack-patch/webpack-polyfills.js"
  ]
}

which points to a patch file, and that patch file is very similar to what my previous gulpfile was doing

const webpack = require("webpack");

module.exports = function (webpackConfig) {
    console.log(webpackConfig)
    // Ensure module/rules exists
    webpackConfig.module = webpackConfig.module || {};
    webpackConfig.module.rules = webpackConfig.module.rules || [];
    webpackConfig.plugins = webpackConfig.plugins || [];

    webpackConfig.module.rules.push(
      {
        resolve: {
          fallback: {
            fs: require.resolve("graceful-fs"),
            stream: require.resolve("stream-browserify"),
            path: require.resolve("path-browserify"),
            buffer: require.resolve("buffer"),
            crypto: false,
            constants: false,
            util: false,
            child_process: false,
            assert: false,
            'process/browser': require.resolve("process/browser")
          }
        }
      }
    )

    webpackConfig.plugins.push(
      new webpack.ProvidePlugin({
        process: "process/browser",
        Buffer: ["buffer", "Buffer"]
      }),
      new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
        const mod = resource.request.replace(/^node:/, "");
        switch (mod) {
            case "path":
                resource.request = "path";
                break;
            case "fs":
                resource.request = "fs";
                break;
            case "buffer":
                resource.request = "buffer";
                break;
            case "stream":
                resource.request = "readable-stream";
                break;
            default:
                throw new Error(`Not found ${mod}`);
        }
      }),
    )

    return webpackConfig;
}

Very happy to be told if I've done anything wrong but my webpart is at least building and showing in workbench now

[Ashlesha-MSFT]

@JamesDerrickHH,
Great work getting the polyfills working — thanks for sharing your approach!

Just wanted to mention that in SPFx 1.22.1 (Heft-based toolchain), webpack customizations can also be done via a config/webpack.extend.js file, referenced from config/config.json. This is the supported replacement for the old gulpfile.js-based build.configureWebpack approach.

If this addresses the original question, feel free to close the issue. Thanks again for sharing your solution — it’s very helpful for others upgrading to the Heft-based toolchain.