title: Unable to use "electron-renderer" webpack target with some packages but "web" target works?
body: <p>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.</p>
  <p>For instance, the following works:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { Scene } from &quot;three&quot;;
  </code></pre>
  <p>But the following does not work:</p>
  <pre class="lang-js prettyprint-override"><code>import { Application, Sprite } from &quot;pixi.js&quot;;
  </code></pre>
  <p>I get the error <code>ReferenceError: require is not defined</code>. However, when I change the target for the renderer process in the Webpack configuration from <code>&quot;electron-renderer&quot;</code> to <code>&quot;web&quot;</code>, 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.</p>
  <p>Are there any problems that might arise if I switch from targeting <code>&quot;electron-renderer&quot;</code>? 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.</p>
  <hr />
  <p>Here's some of the config code:</p>
  <p><code>package.json</code></p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.16.5&quot;,
      &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.16.5&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.16.5&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.16.5&quot;,
      &quot;@babel/preset-typescript&quot;: &quot;^7.16.5&quot;,
      &quot;@babel/runtime&quot;: &quot;^7.16.5&quot;,
      &quot;@types/react&quot;: &quot;^17.0.38&quot;,
      &quot;@types/react-dom&quot;: &quot;^17.0.11&quot;,
      &quot;@types/three&quot;: &quot;^0.135.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.3&quot;,
      &quot;electron&quot;: &quot;^14.0.1&quot;,
      &quot;typescript&quot;: &quot;^4.4.3&quot;,
      &quot;webpack&quot;: &quot;^5.65.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.9.1&quot;
    },
    &quot;dependencies&quot;: {
      &quot;pixi.js&quot;: &quot;^6.2.1&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;three&quot;: &quot;^0.136.0&quot;
    }
  }
  </code></pre>
  <p><code>webpack.config.js</code></p>
  <pre class="lang-js prettyprint-override"><code>const path = require(&quot;path&quot;);
  
  const base = {
    mode: &quot;development&quot;,
    resolve: {
      modules: [path.resolve(__dirname, &quot;src&quot;), &quot;node_modules&quot;],
      extensions: [&quot;.tsx&quot;, &quot;.ts&quot;, &quot;.jsx&quot;, &quot;.js&quot;, &quot;.json&quot;],
    },
    module: {
      rules: [
        {
          test: /\.[jt]sx?$/,
          use: {
            loader: &quot;babel-loader&quot;,
            options: {
              presets: [
                &quot;@babel/preset-env&quot;,
                &quot;@babel/preset-react&quot;,
                &quot;@babel/preset-typescript&quot;,
              ],
            },
          },
          include: /src/,
          exclude: /node_modules/,
        },
      ],
    },
  };
  
  const config = [
    // Renderer process.
    {
      ...base,
      entry: &quot;./src/render.tsx&quot;,
      target: &quot;electron-renderer&quot;,
      output: {
        filename: &quot;render.js&quot;,
        path: path.resolve(__dirname, &quot;dist&quot;),
      },
    },
  
    // Main process.
    {
      ...base,
      mode: &quot;development&quot;,
      entry: &quot;./src/main.ts&quot;,
      target: &quot;electron-main&quot;,
      output: {
        filename: &quot;main.js&quot;,
        path: path.resolve(__dirname, &quot;dist&quot;),
      },
    },
  
    // Preloader.
    {
      ...base,
      mode: &quot;development&quot;,
      entry: &quot;./src/preload.ts&quot;,
      target: &quot;electron-preload&quot;,
      output: {
        filename: &quot;preload.js&quot;,
        path: path.resolve(__dirname, &quot;dist&quot;),
      },
    },
  ];
  
  module.exports = config;
  </code></pre>
  <p><code>main.ts</code></p>
  <pre class="lang-js prettyprint-override"><code>const window = new BrowserWindow({
    width: 800,
    height: 600,
    // For security purposes:
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.resolve(__dirname, &quot;preload.js&quot;),
    },
  });
  </code></pre>