Unable to use "electron-renderer" webpack target with some packages but "web" target works?

I'm developing an Electron application with the following additional setup: TypeScript, React + Three.js + Pixi.js for renderer process, Webpack + Babel (React and TypeScript presets). My problem is that I am able to import React and Three.js into my renderer process code fine but cannot import Pixi.js.

For instance, the following works:

import React, { useEffect, useState } from "react";
import { Scene } from "three";

But the following does not work:

import { Application, Sprite } from "pixi.js";

I get the error ReferenceError: require is not defined. However, when I change the target for the renderer process in the Webpack configuration from "electron-renderer" to "web", everything seems to work fine. This seems counter-intuitive to me since it is the Electron renderer process, and seems as if there is some issue in the way that Pixi.js is packaged.

Are there any problems that might arise if I switch from targeting "electron-renderer"? Or is there some way to get the Pixi.js imports to work? Overall, I'm a bit confused as to what the problem actually is.

Here's some of the config code:

package.json

{
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@babel/plugin-transform-runtime": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "@babel/preset-react": "^7.16.5",
    "@babel/preset-typescript": "^7.16.5",
    "@babel/runtime": "^7.16.5",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "@types/three": "^0.135.0",
    "babel-loader": "^8.2.3",
    "electron": "^14.0.1",
    "typescript": "^4.4.3",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  "dependencies": {
    "pixi.js": "^6.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "three": "^0.136.0"
  }
}

webpack.config.js

const path = require("path");

const base = {
  mode: "development",
  resolve: {
    modules: [path.resolve(__dirname, "src"), "node_modules"],
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript",
            ],
          },
        },
        include: /src/,
        exclude: /node_modules/,
      },
    ],
  },
};

const config = [
  // Renderer process.
  {
    ...base,
    entry: "./src/render.tsx",
    target: "electron-renderer",
    output: {
      filename: "render.js",
      path: path.resolve(__dirname, "dist"),
    },
  },

  // Main process.
  {
    ...base,
    mode: "development",
    entry: "./src/main.ts",
    target: "electron-main",
    output: {
      filename: "main.js",
      path: path.resolve(__dirname, "dist"),
    },
  },

  // Preloader.
  {
    ...base,
    mode: "development",
    entry: "./src/preload.ts",
    target: "electron-preload",
    output: {
      filename: "preload.js",
      path: path.resolve(__dirname, "dist"),
    },
  },
];

module.exports = config;

main.ts

const window = new BrowserWindow({
  width: 800,
  height: 600,
  // For security purposes:
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
    preload: path.resolve(__dirname, "preload.js"),
  },
});