Mismatch in webpack versions

[pschaeflein]

When scaffolding a project using generator-sharepoint@1.16.1, the installed version of web pack is 5.75.0.

~repo\node_modules\webpack\package.json
"version": "5.75.0"

Using spfx-fast-serve@3.0.6, running the spfx-fast-serve command patched the project's package.json to include "spfx-fast-serve-helpers": "~1.16.0"

Ran npm install as instructed. In the resulting state, the webpack.BannerPlugin does not work:

[14:16:25] Starting subtask 'webpack'...
[14:16:25] Error - [webpack] TypeError: Cannot read properties of undefined (reading 'tap')
[14:16:25] Error - 'webpack' sub task errored after 118 ms
 Cannot read properties of undefined (reading 'tap')
[14:16:25] 'bundle' errored after 5.53 s

---

Internet research indicates that the "undefined (reading 'tap')" error is caused by incompatible versions between webpack and the plugin. Since the plugin is built-in to webpack, I don't believe that to be the issue.

Upon investigation, I discovered that webpack in the node_modules folder below fast-serve is version 4.44.2

~repo\node_modules\spfx-fast-serve-helpers\node_modules\webpack
  "version": "4.44.2"

This, I think, is the incompatibility.

[pschaeflein]

Demonstration spfx package: https://github.com/pschaeflein/fast-serve-webpack-ver-issue-2023

[s-KaiNet]

It's not fast-serve issue, scaffold a new SPFx 1.16 project without fast-serve and add below code to the gulpfile.js:

const webpack = require("webpack");
build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    var buildInfoBanner = new webpack.BannerPlugin({ banner: "Testing" });
    generatedConfiguration.plugins.push(buildInfoBanner);

    return generatedConfiguration;
  }
});

Run gulp bundle and you have exactly the same error. The problem is, that some MSFT dependencies now use webpack5, but the SPFx build pipeline still use webpack4. This question should be better addressed to MSFT.

[s-KaiNet]

I found that you can reference the "original" webpack by using below line:

var buildInfoBanner = new build.webpack.taskConfig.webpack.BannerPlugin({ banner: "Testing" });

[pschaeflein]

I found that you can reference the "original" webpack by using below line: var buildInfoBanner = new build.webpack.taskConfig.webpack.BannerPlugin({ banner: "Testing" });

Brilliant. Just what I need. Thx.