webpack-asset-relocator-loader fails when adding native module to basic webpack template

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.54
• Electron Version: v11.2.3
• Operating System: Ubuntu 20.04 x64
• Last Known Working Electron Forge version:: N/A

Expected Behavior

Using the Prisma package with the webpack template should work correctly.

Actual Behavior

When trying to launch with electron-forge start, the following error is thrown:

App threw an error during load
Error: Module build failed (from ./node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js):
SyntaxError: Unexpected token (15825:12)
    at Object.module.exports.pp$4.raise (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:20834:13)
    at Object.module.exports.pp.unexpected (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:18680:8)
    at Object.module.exports.pp$3.parseIdent (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:20785:10)
    at Object.parseIdent (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:35886:27)
    at Object.parseIdent (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:15966:27)
    at Object.module.exports.pp$3.parsePropertyName (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:20586:105)
    at Object.parsePropertyName (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:286:36)
    at Object.module.exports.pp$1.parseClassElement (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:19355:27)
    at Object.parseClassElement (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:35821:40)
    at Object.parseClassElement (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:15838:56)
    at Object.parseClassElement (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:278:46)
    at Object.module.exports.pp$1.parseClass (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:19307:26)
    at Object.parseClass (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:35788:29)
    at Object.parseClass (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:15805:29)
    at Object.parseClass (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:261:29)
    at Object.module.exports.pp$1.parseStatement (/<project path>/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:18829:17)
    at Object../node_modules/@prisma/client/runtime/index.js (/<project path>/.webpack/main/index.js:292:7)
    at __webpack_require__ (/<project path>/.webpack/main/index.js:21:30)
    at Object../node_modules/.prisma/client/index.js (/<project path>/.webpack/main/index.js:114:5)
    at __webpack_require__ (/<project path>/.webpack/main/index.js:21:30)
    at Object../node_modules/@prisma/client/index.js (/<project path>/.webpack/main/index.js:270:16)
    at __webpack_require__ (/<project path>/.webpack/main/index.js:21:30)
    at Object../src/main.js (/<project path>/.webpack/main/index.js:312:26)
    at __webpack_require__ (/<project path>/.webpack/main/index.js:21:30)
    at /<project path>/.webpack/main/index.js:85:18
    at Object.<anonymous> (/<project path>/.webpack/main/index.js:88:10)

To Reproduce

A full repro is available here: https://github.com/lostfictions/electron-forge-webpack-native-repro You can clone it and run yarn to install deps and then yarn start to see the issue.

Steps to repro yourself:

• Run yarn create electron-app my-new-app --template=webpack.
• Run yarn add -D prisma.
• Add a basic Prisma schema (see repro above for an example) and run yarn prisma generate.
• Add the following to main.js:

  const { PrismaClient } = require('@prisma/client');
  const prisma = new PrismaClient()
  

• Run yarn start. The error is produced on the console.

Additional Information

I noticed that @marshallofsound/webpack-asset-relocator-loader was pretty outdated relative to @vercel/webpack-asset-relocator-loader, so experimentally I tried replacing the former with the latter. This actually resolves the above issue!

However, trying to actually use the library results in a different error, where it seems it cannot find some of the relocated assets. It spits out an error like this:

  Query engine binary for current platform "debian-openssl-1.1.x" could not be found.
This probably happens, because you built Prisma Client on a different platform.
(Prisma Client looked in "/<repo directory>/.webpack/main/query-engine-debian-openssl-1.1.x")

Searched Locations:

  /<repo parent directory>/.prisma/client
  /<repo directory>/node_modules/@prisma/client
  /<repo directory>/.webpack
  /<repo directory>/.webpack/main
  /<repo directory>/.webpack/main
  /<repo directory>/.webpack/main

Sure enough, the assets in question have been relocated to /<repo directory>/.webpack/main/native_modules, and Prisma is not able to find them there.

Removing outputAssetBase from the loader config so that assets are emitted to the base .webpack/main directory resolves this issue:

diff --git a/webpack.rules.js b/webpack.rules.js
index 219bb31..4cadcaa 100644
--- a/webpack.rules.js
+++ b/webpack.rules.js
@@ -9,9 +9,6 @@ module.exports = [
     parser: { amd: false },
     use: {
       loader: '@vercel/webpack-asset-relocator-loader',
-      options: {
-        outputAssetBase: 'native_modules',
-      },
     },
   },
   // Put your webpack loader rules in this array.  This is where you would put

Finally, this results in a working project. You can see the working version in effect in a branch of the above repro repository: https://github.com/lostfictions/electron-forge-webpack-native-repro/tree/use-vercel-plugin. (However, I get that this might not be ideal – it’s not clear to me whether there’s a risk of relocated native module assets clobbering other files if they’re not placed under a subdirectory. It’s unclear to me how to get Prisma working otherwise, unfortunately.)

Sorry for the long issue, but this does appear to be a fairly complex problem. I tried with a different native dependency (better-sqlite3) and noticed that it seems to work with the initial template, so it may be something unique to Prisma’s configuration.

[lostfictions]

@pablodanilomota Really not sure why that would be, unfortunately.

To be honest, I’ve been looking around for an alternate solution to electron-forge, since it seems to be in maintenance mode and lots of important issues are not getting addressed. There’s commits being made, but 99% of them seem to be blind dependency bumps. For my part, beyond the existing bugs, it’s getting more and more inconvenient to not be able to use Webpack 5. I may just end up writing my own watcher toolchain.

It’s a shame, since I think it’s a really important part of the Electron ecosystem – I wish the foundation/sponsors behind Electron proper would adopt it as an official tool so that it could be more actively developed and governed.

[timfish]

For now, I’ve published this loader. that wraps the Vercel loader and works with forge.