Cypress publicPath not supported with percy and nock - node.js

Question

I'm getting an issue where I am trying to add percy to my Cypress tests using nock and webpack 5. Based on a solution found here, I tried to set the publicPath to an empty string, but with no success. The error message I get is
The following error originated from your test code, not from Cypress.
Automatic publicPath is not supported in this browser
When Cypress detects uncaught errors originating from your test code
it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure
.../webpack/runtime/publicPath:14:1
// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
^
scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
__webpack_require__.p = scriptUrl;
In my cypress/plugins/webpack.config.js file, I have the following.
module.exports = {
resolve: { extensions: ['.ts', '.js'], fallback: { http: false } },
output: {
publicPath: '/',
},
module: {
rules: [
{
test: /\.svg$/,
use: ['#svgr/webpack'],
},
],
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
transpileOnly: true,
},
},
],
},
};
In my cypress/plugins/index.js, I have the following.
const nock = require('nock');
const http = require('http');
const next = require('next');
const webpackPreprocessor = require('#cypress/webpack-preprocessor');
module.exports = async (on, config) => {
const app = next({ dev: true });
const handleNextRequests = app.getRequestHandler();
await app.prepare();
const customServer = new http.Server(async (req, res) => {
return handleNextRequests(req, res);
});
await new Promise((resolve, reject) => {
customServer.listen(3000, (err) => {
if (err) {
return reject(err);
}
resolve();
});
});
on('task', {
clearNock() {
nock.restore();
nock.cleanAll();
return null;
},
async nock({ hostname, method, path, statusCode, body }) {
nock.activate();
// add one-time network stub like
method = method.toLowerCase();
nock(hostname)[method](path).reply(statusCode, body);
return null;
},
});
const options = {
webpackOptions: require('./webpack.config'),
watchOptions: {},
};
on('file:preprocessor', webpackPreprocessor(options));
return config;
};
How can I configure the publicPath properly?