Got: Using `got` in a project built with webpack crashes as `electron` is used, but not part of `package.json`

[janpio]

I have an Ionic project that uses the (node) package trakt.tv that uses got. Ionic builds projects with webpack, which unfortunately doesn't like got require()ing electron in the code but not having it as a dependency:

PS C:\Users\Jan\Documents\yatsa> npm run ionic:build

> [email protected] ionic:build C:\Users\Jan\Documents\yatsa
> ionic-app-scripts build

[11:54:01]  ionic-app-scripts 2.0.2
[11:54:01]  build dev started ...
[...]
[11:54:06]  webpack started ...
[11:54:06]  copy finished in 4.72 s
[11:54:18]  ionic-app-script task: "build"
[...]
Error: ./node_modules/got/index.js
Module not found: Error: Can't resolve 'electron' in 'C:\Users\Jan\Documents\yatsa\node_modules\got'
resolve 'electron' in 'C:\Users\Jan\Documents\yatsa\node_modules\got'
  Parsed request is a module
  using description file: C:\Users\Jan\Documents\yatsa\node_modules\got\package.json (relative path: .)
  after using description file: C:\Users\Jan\Documents\yatsa\node_modules\got\package.json (relative path: .)
    resolve as module
      looking for modules in C:\Users\Jan\Documents\yatsa\node_modules
        using description file: C:\Users\Jan\Documents\yatsa\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: C:\Users\Jan\Documents\yatsa\package.json (relative path: ./node_modules)
          using description file: C:\Users\Jan\Documents\yatsa\package.json (relative path: ./node_modules/electron)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\Jan\Documents\yatsa\node_modules\electron doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\Jan\Documents\yatsa\node_modules\electron.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\Jan\Documents\yatsa\node_modules\electron.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\Jan\Documents\yatsa\node_modules\electron.json doesn't exist
            as directory
              C:\Users\Jan\Documents\yatsa\node_modules\electron doesn't exist
[C:\Users\Jan\Documents\yatsa\node_modules\electron]
[C:\Users\Jan\Documents\yatsa\node_modules\electron.ts]
[C:\Users\Jan\Documents\yatsa\node_modules\electron.js]
[C:\Users\Jan\Documents\yatsa\node_modules\electron.json]
[C:\Users\Jan\Documents\yatsa\node_modules\electron]
 @ ./node_modules/got/index.js 45:20-39
 @ ./node_modules/trakt.tv/trakt.js
 @ ./src/services/trakt.service.ts
 @ ./src/app/app.module.ts
 @ ./src/app/main.ts
    at new BuildError (C:\Users\Jan\Documents\yatsa\node_modules\@ionic\app-scripts\dist\util\errors.js:16:28)
    at callback (C:\Users\Jan\Documents\yatsa\node_modules\@ionic\app-scripts\dist\webpack.js:119:28)
    at emitRecords.err (C:\Users\Jan\Documents\yatsa\node_modules\@ionic\app-scripts\node_modules\webpack\lib\Compiler.j
s:263:13)
    at Compiler.emitRecords (C:\Users\Jan\Documents\yatsa\node_modules\@ionic\app-scripts\node_modules\webpack\lib\Compi
ler.js:369:38)
    at emitAssets.err (C:\Users\Jan\Documents\yatsa\node_modules\@ionic\app-scripts\node_modules\webpack\lib\Compiler.js
:256:10)
    at applyPluginsAsyncSeries1.err (C:\Users\Jan\Documents\yatsa\node_modules\@ionic\app-scripts\node_modules\webpack\l
ib\Compiler.js:362:12)
    at next (C:\Users\Jan\Documents\yatsa\node_modules\tapable\lib\Tapable.js:154:11)
    at Compiler.compiler.plugin (C:\Users\Jan\Documents\yatsa\node_modules\@ionic\app-scripts\node_modules\webpack\lib\p
erformance\SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (C:\Users\Jan\Documents\yatsa\node_modules\tapable\lib\Tapable.js:158:13)
    at Compiler.afterEmit (C:\Users\Jan\Documents\yatsa\node_modules\@ionic\app-scripts\node_modules\webpack\lib\Compile
r.js:359:9)
[...]

Here the relevant part again:

Module not found: Error: Can't resolve 'electron' in 'C:\Users\Jan\Documents\yatsa\node_modules\got'
resolve 'electron' in 'C:\Users\Jan\Documents\yatsa\node_modules\got'
  Parsed request is a module

Now gotdoesn't have electronin package.json, that is correct.
In normal execution it doesn't even use electron, and if I understood that correctly it only has some special config option that includes and uses electron (which then is to be though to be installed by the using project or globally):
https://github.com/sindresorhus/got#useelectronnet
https://github.com/sindresorhus/got/blob/c0c6bcf1acb7132356d5fdddcf757466071799f4/index.js#L44-L46
As I don't use electron and don't have useElectronNetset, this shouldn't be relevant to me.

Did I understand the error correctly?

Is this an Ionic app-scripts problem? (Created a similar ticket to this one at https://github.com/ionic-team/ionic-app-scripts/issues/1116)
Is this a webpack problem?
Is this a gotproblem?
Is this my problem and I just have to add electron to my app as a dependency?

Workaround seems to be to add electron to my project myself for now:
npm install electron --save-dev

[sindresorhus]

This is a problem with Webpack. It shouldn't throw on a require that's inside a conditional. Open an issue on Webpack.

[janpio]

Thanks.

[janpio]

I created an issue for Webpack: https://github.com/webpack/webpack/issues/5294

[sbj42]

For anyone coming across this, the conclusion from the webpack discussion that helped me was to add the IgnorePlugin, as:

  plugins: [new webpack.IgnorePlugin(/^electron$/)]

[awantoch]

For anyone using Next.js, here's the solution @sbj42 proposed in an example next.config.js:

module.exports = {
  webpack: (config, { webpack }) => {
    config.plugins.push(new webpack.IgnorePlugin(/^electron$/));
    return config
  }
}

[felixhao28]

IgnorePlugin's config now looks like this:

module.exports = {
    plugins: [
        new webpack.IgnorePlugin({
            resourceRegExp: /^electron$/
        }),
    ]
}