Blank preferences, errors running "build". Compatibility with @electron-forge/plugin-webpack ?

[thehans]

Describe the bug
I have been able to run the Demo example code which is included in this repository,
but when adding to my existing electron project which uses electron-forge and it's webpack plugin @electron-forge/plugin-webpack
then preferences.show() just opens an empty window.

To Reproduce

I started with an electron-forge template and tried to make minimal edits to add basic preferences:

1. electron-forge webpack template (from their docs): npm init electron-app@latest preferences-test -- --template=webpack
2. cd preferences-test && npm install electron-preferences
3. Copy basic preferences sample from README into main.js const preferences = new ElectronPreferences({ ...
4. Append preferences.show() to the app.on('ready' handler in main.js
5. Run the app, observe blank preferences window.

I'm not sure if I'm supposed to run the same npm run build command from the Demo / example in an external project like this, but attempting that results in many errors which I don't understand.

$ npm run build

> [email protected] build
> rimraf ./build && webpack

CLI for webpack must be installed.
  webpack-cli (https://github.com/webpack/webpack-cli)     

We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...

added 11 packages, and audited 794 packages in 1s

121 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
assets by status 0 bytes [cached] 1 asset

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in main
Module not found: Error: Can't resolve './src' in '/home/hans/GitHub/preferences-test'
resolve './src' in '/home/hans/GitHub/preferences-test'
  using description file: /home/hans/GitHub/preferences-test/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/hans/GitHub/preferences-test/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/hans/GitHub/preferences-test/src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/hans/GitHub/preferences-test/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/hans/GitHub/preferences-test/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/hans/GitHub/preferences-test/src.wasm doesn't exist
      as directory
        existing directory /home/hans/GitHub/preferences-test/src
          using description file: /home/hans/GitHub/preferences-test/package.json (relative path: ./src)
            using path: /home/hans/GitHub/preferences-test/src/index
              using description file: /home/hans/GitHub/preferences-test/package.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/hans/GitHub/preferences-test/src/index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/hans/GitHub/preferences-test/src/index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/hans/GitHub/preferences-test/src/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/hans/GitHub/preferences-test/src/index.wasm doesn't exist

webpack 5.88.2 compiled with 1 error and 1 warning in 112 ms

Expected behavior
Visible preferences

Machine (please complete the following information):

• OS: Linux Mint 21.2
• Electron version: "26.2.1"
• electron-preferences version: "2.8.2"

Additional context

• "@electron-forge/core" version: "6.4.2",
• "@electron-forge/plugin-webpack" version: "6.4.2"

I can upload this sample project as a new GitHub repo if it's any help. Let me know.

[thehans]

By the way, I encountered an additional error when integrating into my existing application, however I could not reproduce this when creating a project from template as in the above instructions:

(node:2880843) electron: Failed to load URL: file:///home/hans/MyApp/.webpack/main/build/index.html with error: ERR_FILE_NOT_FOUND
warning:60

That gets printed to console when preferences.show() is called.

There is no reference to build/index.html in my own project source, only in electron-preferences/index.js

[pvrobays]

Hi @thehans
Thanks for creating this issue.

For my projects I also use electron-forge so it should definitely be able to work.

Having a quick look at the last error message you've sent it seems like an issue with the webpack plugin.
I assume that webpack is trying to bundle the electron-preferences code as well. We may need to exclude that one in your code. You could already try and find a solution for that: exclude (some) node_modules from webpack.

Anyway, I will try to reproduce the issue with the steps you mentioned above and see what we can do to avoid this issue. Weird thing there is that I don't see an actual error message pointing to electron-preferences. But please be patient, I don't have unlimited time :)

[krasnyd]

Hello. I ran into a same problem as you. Is there some way to solve it?

[zdc26z]

I was never able to solve it. Ended up creating my own fields for the preferences and updating them using the API methods.

…

On Sat, Nov 18, 2023, 7:58 PM David Krásný ***@***.***> wrote: Hello. I ran into a same problem as you. Is there some way to solve it? — Reply to this email directly, view it on GitHub <#207 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGOQCFO34KRP3QUJLGBILLYFFRVZAVCNFSM6AAAAAA4VP46SGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJXG4YTONZRGA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[pvrobays]

Hi @krasnyd and @zdc26z

Sorry for the late response. Last time I was able to reproduce the issue, but didn't have the time to find a decent workaround.

The issue lies within the webpack bundling of electron-forge which tree shakes the modules and ignores what's defined in the files property of electron-preferences's package.json.
That results in the .webpack/main/native_modules folder not containing the necessary static files of the electron-preferences HTML.

Meanwhile I've found a workaround for now, but I would love to find an even better solution which fixes this all 'automagically'.

For now you can add the copy-webpack-plugin webpack plugin, and define the static assets to be copied over to the right folder after the webpack bundle:

1. npm i copy-webpack-plugin
2. replace webpack.main.config.js with the following content (or just add the plugin section:

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  entry: ['./src/main.js'],
  // Put your normal webpack config below here
  module: {
    rules: require('./webpack.rules'),
  },
  plugins: [
      new CopyPlugin({
        patterns: [
          { from: "node_modules/electron-preferences/build", to: "./native_modules" }
        ]
      })
  ]
};

Can you guys verify this workaround fixes your issue?

[lacymorrow]

Personally I use electron-builder for my project (crossover)