Article Comments

[Pjaerr]

Comments for the article at http://joshuaj.co.uk/blog/building-desktop-app-svelte-electron

[Wolsten]

Hi Joshua,

I found this to be very useful and got it working to the point just before you go onto file saving. However, when I added the following line to App.svelte:

const { ipcRenderer } = require("electron");

The Electron window comes up blank instead of showing the HTML content of App.svelte, which had been working perfectly up to that point. I didn't start adding the other code yet that makes use of the ipcRenderer.

Any suggestions?

Thanks

Steve

[Pjaerr]

@Wolsten 👋 Hey Steve

I don't seem to get this issue (on windows or mac).

When you create your new BrowserWindow in the electron main.js file, make sure you're setting nodeIntegration to true like so:

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

if you don't add that it will most likely error as we are trying to use nodejs in the svelte file when we call require("electron")

If that isn't the issue, you can try opening dev-tools when launching the app by adding the following line below where you create your new BrowserWindow

mainWindow.webContents.openDevTools();

which will open the browser dev tools for you when you next run npm start. It's worth checking to see if there is an error message in the console that you can use to help debug.

Give me a shout if you still have an issue and I'll be happy to help!

thanks, Josh

[Wolsten]

Hi Joshua,

Yes I have those settings but I will try using the dev tools to see if that can throw some light on it.

Thanks for the quick reply.

Best wishes

Steve

On 11 Mar 2021, at 18:14, Joshua Jackson @.***> wrote:

@Wolsten https://github.com/Wolsten 👋 Hey Steve

I don't seem to get this issue (on windows or mac).

When you create your new BrowserWindow in the electron main.js file, make sure you're setting nodeIntegration to true like so:

const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); if you don't add that it will most likely error as we are trying to use nodejs in the svelte file when we call require("electron")

If that isn't the issue, you can try opening dev-tools when launching the app by adding the following line below where you create your new BrowserWindow

mainWindow.webContents.openDevTools();

which will open the browser dev tools for you when you next run npm start. It's worth checking to see if there is an error message in the console that you can use to help debug.

Give me a shout if you still have an issue and I'll be happy to help!

thanks, Josh

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Pjaerr/Svelte-Electron-Desktop-App/issues/1#issuecomment-796939701, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACLIBTSXOCVAAIXHDSXBXYLTDEB75ANCNFSM4KZJEVWQ.

[Wolsten]

Hi Joshua,

Apologies for the delay but I displayed the web console as suggested and saw the following error:

Uncaught ReferenceError: require is not defined at N (App.svelte:6) at T (index.mjs:1474) at new target (main.js:3) at main.js:3 at main.js:4

This is the line causing the problem:

const { ipcRenderer } = require("electron");

In my electron main.js I am creating the browser window as follows:

const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } })

This all looks correct?

Best wishes

Steve

[Pjaerr]

@Wolsten Hey Steve, sorry for not getting back to you sooner!

I think your issue might be related to a security change in Electron (https://www.electronjs.org/docs/breaking-changes#default-changed-contextisolation-defaults-to-true). You may be able to fix by setting contextIsolation: false in your window's webPreferences object.

This may fix your issue but is not the reccomended way to do things as you could technically expose full access to nodejs. I am planning on updating my blogpost soon as I am technically spreading insecure practices but until then I think this github issue comment might be useful for you: https://github.com/electron/electron/issues/9920#issuecomment-575839738

Thanks, Josh

[Pjaerr]

👋 Hey @Wolsten I realise this is just a tiny bit late in the day but just incase you never found what you were looking for I've updated the blogpost so that it follows the better security practices and shouldn't have the error you were encountering.

I've also updated the template: https://github.com/Pjaerr/svelte-electron-template

PS: Sorry for leaving you hanging with an error like that, I wanted to fix my blogpost up but I had issues getting it to build and started encountering loads of other problems so I just had to rebuild my site from scratch 🙈 I don't expect you to find this blogpost useful anymore given so much time has passed but I thought it worth updating you in any case.

[Wolsten]

Hi Joshua,

No problem. I am working on some others things at the moment - including brewforukraine.uk - but will keep this in mind for later. I still like the idea of electron except for its bundle size when distributing. Have you looked at neutralinojs? Much smaller as it doesn’t bundle chromium but still at early stages.

Steve