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

[lostfictions]

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.

[pablodanilomota]

Hi @lostfictions ! Can you help me? When I put @vercel/webpack-asset-relocator-loader I get the following error:
Uncaught ReferenceError: __dirname is not defined. My project is exactally the same as yours.

[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]

@vercel/webpack-asset-relocator-loader works perfectly well in the Electron main process but there are multiple incompatibilities with the renderer processes. The __dirname is not defined issue is caused by HtmlWebpackPlugin and even if the compilation didn't trip up there, __dirname has the incorrect path both in development and production.

I've been looking into a way to fix this and so far I've come up with a webpack plugin that modifies the code injected by the vercel plugin to be compatible with Electron renderers.

You can see an example project here and the plugin that patches the code injection is here.

If this is deemed to not be a terrible fragile solution, I'll submit a PR to add this to forge.

[timfish]

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