Preferences window is empty

[McLive]

I tried the demo code but the opened preferences window is just empty. No errors shown.

Code:

app.on('ready', createWindow);

function createWindow() {

    [... create window and stuff]

    const pref = loadPreferences();
    console.log(pref);
    pref.show();
}

function loadPreferences() {
    return new ElectronPreferences({
        /**
         * Where should preferences be saved?
         */
        'dataStore': path.resolve(app.getPath('userData'), 'preferences.json'),
        /**
         * Default values.
         */
        'defaults': {
            'notes': {
                'folder': path.resolve(os.homedir(), 'Notes')
            },
            'markdown': {
                'auto_format_links': true,
                'show_gutter': false
            },
            'preview': {
                'show': true
            },
            'drawer': {
                'show': true
            }
        },
        /**
         * If the `onLoad` method is specified, this function will be called immediately after
         * preferences are loaded for the first time. The return value of this method will be stored as the
         * preferences object.
         */
        'onLoad': (preferences) => {
            // ...
            return preferences;
        },
        /**
         * The preferences window is divided into sections. Each section has a label, an icon, and one or
         * more fields associated with it. Each section should also be given a unique ID.
         */
        'sections': [
            {
                'id': 'about',
                'label': 'About You',
                /**
                 * See the list of available icons below.
                 */
                'icon': 'single-01',
                'form': {
                    'groups': [
                        {
                            /**
                             * Group heading is optional.
                             */
                            'label': 'About You',
                            'fields': [
                                {
                                    'label': 'First Name',
                                    'key': 'first_name',
                                    'type': 'text',
                                    /**
                                     * Optional text to be displayed beneath the field.
                                     */
                                    'help': 'What is your first name?'
                                },
                                {
                                    'label': 'Last Name',
                                    'key': 'last_name',
                                    'type': 'text',
                                    'help': 'What is your last name?'
                                },
                                {
                                    'label': 'Gender',
                                    'key': 'gender',
                                    'type': 'dropdown',
                                    'options': [
                                        {'label': 'Male', 'value': 'male'},
                                        {'label': 'Female', 'value': 'female'},
                                        {'label': 'Unspecified', 'value': 'unspecified'},
                                    ],
                                    'help': 'What is your gender?'
                                },
                                {
                                    'label': 'Which of the following foods do you like?',
                                    'key': 'foods',
                                    'type': 'checkbox',
                                    'options': [
                                        {'label': 'Ice Cream', 'value': 'ice_cream'},
                                        {'label': 'Carrots', 'value': 'carrots'},
                                        {'label': 'Cake', 'value': 'cake'},
                                        {'label': 'Spinach', 'value': 'spinach'}
                                    ],
                                    'help': 'Select one or more foods that you like.'
                                },
                                {
                                    'label': 'Coolness',
                                    'key': 'coolness',
                                    'type': 'slider',
                                    'min': 0,
                                    'max': 9001
                                },
                                {
                                    'label': 'Eye Color',
                                    'key': 'eye_color',
                                    'type': 'color',
                                    'format': 'hex', // can be hex, hsl or rgb
                                    'help': 'Your eye color'
                                },
                                {
                                    'label': 'Hair Color',
                                    'key': 'hair_color',
                                    'type': 'color',
                                    'format': 'rgb',
                                    'help': 'Your hair color'
                                }
                            ]
                        }
                    ]
                }
            },
            {
                'id': 'notes',
                'label': 'Notes',
                'icon': 'folder-15',
                'form': {
                    'groups': [
                        {
                            'label': 'Stuff',
                            'fields': [
                                {
                                    'label': 'Read notes from folder',
                                    'key': 'folder',
                                    'type': 'directory',
                                    'help': 'The location where your notes will be stored.'
                                },
                                {
                                    'heading': 'Important Message',
                                    'content': '<p>The quick brown fox jumps over the long white fence. The quick brown fox jumps over the long white fence. The quick brown fox jumps over the long white fence. The quick brown fox jumps over the long white fence.</p>',
                                    'type': 'message',
                                }
                            ]
                        }
                    ]
                }
            },
            {
                'id': 'space',
                'label': 'Other Settings',
                'icon': 'spaceship',
                'form': {
                    'groups': [
                        {
                            'label': 'Other Settings',
                            'fields': [
                                {
                                    'label': 'Phone Number',
                                    'key': 'phone_number',
                                    'type': 'text',
                                    'help': 'What is your phone number?'
                                },
                                {
                                    'label': "Foo or Bar?",
                                    'key': 'foobar',
                                    'type': 'radio',
                                    'options': [
                                        {'label': 'Foo', 'value': 'foo'},
                                        {'label': 'Bar', 'value': 'bar'},
                                        {'label': 'FooBar', 'value': 'foobar'},
                                    ],
                                    'help': 'Foo? Bar?'
                                }
                            ]
                        }
                    ]
                }
            }
        ]
    });
};

The console.log(pref); shows the correct preferences output.

What am I missing?

[Portree-Kid]

Same here

[pquerner]

➜  electron-preferences git:(master) npm -v
6.9.0
➜  electron-preferences git:(master) node -v
v10.16.3

DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=18.04
DISTRIB_CODENAME=bionic
DISTRIB_DESCRIPTION="Ubuntu 18.04.3 LTS"

using https://github.com/tkambler/electron-preferences/tree/9ef2c58a39ddd9df9a254d369fb2d08fdceee18e

[ednjv]

did you find any solution for this?

[pquerner]

Not really. I found a project which it still worked on. It uses an older version of electron and such, so I don't think thats really a solution. It works for me internally so I use it in the meantime.

[ednjv]

Ok so in case this helps anyone my problem was with my webpack config, since electron-preferences uses a template for the preferences layout which is located in the build folder, we need to import that folder into our webpack build. I used a combination of a loader (webpack-asset-relocator-loader) and a plugin (copy-webpack-plugin), not sure if this is the best way but it works:

For my rules I have

  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@marshallofsound/webpack-asset-relocator-loader',
      options: {
        debugLog: false,
      },
    },
  },

This will bring the electron-preferences/build/index.html into our build folder and it will also rename any references to this route correctly, so instead of calling electron-preferences/build/index.html it will call whatever your build route is + index.html

Now until this point I get a blank window with a bunch of errors in the console because the files index.html uses cannot be found

So I installed the copy-webpack-plugin to copy all of the build folder which has all the needed assets

  plugins: [
    new CopyPlugin([{ from: 'node_modules/electron-preferences/build', to: '.' }]),
  ]

And it works.

I'm using

node: 12.6.0
npm: 6.9.0
electron: 6.0.3

[VictorioBerra]

This is kind of a pain, im using Electron 9. Surely there has to be an easier way to make this automatic? That HTML is so small, you would think we could just bake it right into the JS and not deal with custom loaders.

[pvrobays]

@McLive I think the initial issue was due to the 'onLoad': (preferences) => { } inside your JSON.
Electron doesn't allow serialization of functions anymore with their new serializer.

@VictorioBerra The build folder should be available. It has the index.html, as well as all the styling and the icons.
Closing this issue, as the initial isssue is fixed. If you have a suggestion for your issue, please feel free to create a new issue.

[thehans]

Closing this issue, as the initial isssue is fixed. If you have a suggestion for your issue, please feel free to create a new issue.

I don't understand, what exactly was the fix? I still have this issue.

[pvrobays]

Hi @thehans
Initial issue was due to new security constraints of electron. Where IPC calls can't contain functions anymore. Only primitive objects.

If you encounter an issue with the same symptoms, please create a new issue and provide all the details of your setup and the error you receive.