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 got doesn't have electron in 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

got/index.js

Lines 44 to 46 in c0c6bcf

	if (opts.useElectronNet && process.versions.electron) {
	const electron = require('electron');
	fn = electron.net || electron.remote.net;

As I don't use electron and don't have useElectronNet set, 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 ionic-team/ionic-app-scripts#1116)
Is this a webpack problem?
Is this a got problem?
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: webpack/webpack#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$/
        }),
    ]
}