webpack template: webpack-asset-relocator-loader broken with native deps

[NaridaL]

Preflight Checklist

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project follows, as appropriate.
• I have searched the issue tracker for a bug that matches the one I want to file, without success.

Issue Details

• Electron Forge Version:

  • 6.0.0-beta.47

• Electron Version:

  • v7.1.10

• Operating System:

  • Windows 10 Pro (1903)

• Last Known Working Electron Forge version::

  • N/A

Expected Behavior

The webpack template and/or the webpack-asset-relocator-loader plugin bundled with it should work with native dependencies. For example electron-windows-notifications, which is mentioned in the electron docs.

Actual Behavior

electron forge crashes during compilation

$ npm run start

> [email protected] start C:\Users\aval\tsdev\electron-forge-webpack-relocator
> electron-forge start

√ Checking your system
√ Locating Application
√ Preparing native dependencies: 5 / 5
√ Compiling Main Process Code
√ Launch Dev Servers
√ Compiling Preload Scripts
√ Launching Application


Webpack Output Available: http://localhost:9000



An unhandled rejection has occurred inside Forge:
TypeError: Cannot read property '0' of undefined
    at C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:15251:53
    at Array.find (<anonymous>)
    at Object.enter (C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:15242:60)
    at visit (C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:38730:10)
    at visit (C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:38747:6)
    at visit (C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:38752:5)
    at visit (C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:38747:6)
    at walk (C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:38710:3)
    at Object.module.exports.module.exports (C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\@marshallofsound\webpack-asset-relocator-loader\dist\index.js:14856:3)
    at LOADER_EXECUTION (C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\loader-runner\lib\LoaderRunner.js:119:14)
    at runSyncOrAsync (C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\loader-runner\lib\LoaderRunner.js:120:4)
    at iterateNormalLoaders (C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at C:\Users\aval\tsdev\electron-forge-webpack-relocator\node_modules\graceful-fs\graceful-fs.js:115:16

Electron Forge was terminated. Location:
{}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `electron-forge start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\aval\AppData\Roaming\npm-cache\_logs\2020-01-29T20_52_20_265Z-debug.log

To Reproduce

npx create-electron-app electron-forge-webpack-relocator --template=webpack
cd electron-forge-webpack-relocator
npm i electron-windows-notifications
npm run start

I have created a repository from the above steps. clone it and run npm i && npm run start to reproduce the issue: https://github.com/NaridaL/electron-forge-webpack-relocator

Additional Information

If I'm understanding it correctly, @marshallofsound/webpack-asset-relocator-loader rewrites requires to *.node files so that they still work after being moved into the .webpack directory. Wouldn't it be simpler to not delete native dependencies when packaging and keep requires as they are?

[jpalumickas]

Hey @NaridaL,

We have the same problem as you described. Did you find any solution to fix this temporarily?

[NaridaL]

@jpalumickas

Yup, I've excluded these modules from webpack in my webpack.renderer.config.js.

const rules = require('./webpack.rules')

rules.push({
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
})
module.exports = {
  // Put your normal webpack config below here
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['.ts', '.tsx', '.js', '.xml'],
  },
  module: {
    rules,
  },
  externals: [
    function(context, request, callback) {
      if (
        [
          'bindings',
          'selenium-webdriver',
          'selenium-webdriver/chrome',
          'electron-windows-notifications',
        ].includes(request)) {
        return callback(null, 'commonjs ' + request)
      }
      callback()
    },
  ],
}

then, in my package.json, I've overriden the packagerConfig so node_modules are included into the packaged app:

"config": {
    "forge": {
      "packagerConfig": {
        "ignore": [
          "\\.gitignore",
          "node_modules/\\.cache",
          ".*\\.(iobj|pdb|ipdb)$"
        ],
        "derefSymlinks": true,
        "icon": "icons/app.ico"
      },
      ...
  },

Finally, I've moved all dependencies except the ones I've excluded from webpack to devDependencies to avoid the packaged app from being huge (electron-packager doesn't bundle devDependencies, and webpack only needs them during development to generate the bundle):

  "dependencies": {
    "electron-windows-notifications": "^3.0.6",
    "selenium-webdriver": "^4.0.0-alpha.7"
  },
  "devDependencies": {
 ... lots lots more

[OriginalEXE]

I got the same error. It was temporarily fixed by replacing @MarshallOfSound 's fork of the "webpack-asset-relocator-loader" with the @zeit original. I am afraid it will break something else down the line though. @MarshallOfSound any chance your fork could be updated with the changes in the original? Or perhaps it's extendible enough now to not require a fork at all?

[barbalex]

This ist still happening to me. With all versions of @electron-forge above 6.0.0-beta.50, last tested with 6.0.0-beta.54