support electron 24.0.0

[kaptinlin]

it shows empty screen when upgrade electron from ^21.4.3 to ^24.0.0

[irg1008]

Make sure you have nodeIntegration to false, contextIsolation to true and most important, sandbox to false.

  const browserOptions: BrowserWindowConstructorOptions = {
    ...state,
    ...options,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true,
      enableBlinkFeatures: '',
      sandbox: false,
      ...options.webPreferences,
    },
  };

[tomaszczura]

Still doesn't work for me

[kaptinlin]

@irg1008, i follow your code, but it's not working still.

https://github.com/KaptinLin/nextron-ts-template

[bfan1256]

I get global is undefined with this approach.

[irg1008]

I get global is undefined with this approach.

Maybe you are accessing the global object in server side rendering. The renderer process can only access the contextBridge in client side

[irg1008]

@irg1008, i follow your code, but it's not working still.

https://github.com/KaptinLin/nextron-ts-template

Weirdly is working for me with latest versions from both next.js and electron so will try to upload an example repo and share it here in the next hours

[irg1008]

Okay here is a working template we use for our projects (kinda):

It uses turbo and pnpm and it has some boilerplate but I think will do the trick

https://github.com/irg1008/nextron-template

Versions:

• Electron: 24.1.2
• Next.js: 13.2.4
• Nextron: 8.5.0

Instructions:

1. Clone and install from workspace root: pnpm i
2. Start the app (VSCode): Start the app from run and debug (Terminal): turbo dev --filter=app... or just turbo dev

Hope it helps. You can also just look at the background/preload files to figure it out!

[kaptinlin]

It's working. but how to use electron-store?

I am getting errors when import Store from 'electron-store';

[irg1008]

@KaptinLin Are you getting those errors in the template or your project?

[irg1008]

Because the template provided has no errors in console for me:

[kaptinlin]

You can see https://github.com/KaptinLin/nextron-template

Maybe we can't use electron-store on renderer side?

[irg1008]

Yeah that's right. The only main process object available to the renderer is the one exported in the contextBridge. electron-store is a node library and so with nodeIntegration set to false we can't use node libraries in the renderer

[polybean]

I think it is a nextron issue. Any chance to update the "official" templates?

[andirsun]

We are going to update the templates to Electron 24 but I can tell you that version is supported.

[yanchummar]

Yeah that's right. The only main process object available to the renderer is the one exported in the contextBridge. electron-store is a node library and so with nodeIntegration set to false we can't use node libraries in the renderer

I'm running into a similar use case where I need nodeIntegration to be set to true, but when it is set to true, electron fails to load the nextjs app properly, any solutions for this?

[uzunhair]

https://github.com/saltyshiomix/nextron/issues/384#issuecomment-1690094254 Я дополнил ответ, это должно решить вашу проблему

[saltyshiomix]

@Taarek CC: @ShahriarKh @vandetho @tomaszczura @KaptinLin @geraldoramos @irg1008

Sorry for late reply 🙇

Just remove config.target = 'electron-renderer' in next.config.js. It works like a charm 🚀

Before

module.exports = {
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.target = 'electron-renderer'
    }

    return config
  },
}

After

/** @type {import('next').NextConfig} */
module.exports = {
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
  webpack: (config) => {
    return config
  },
}

[MaxLiebsch]

@saltyshiomix fix: Support for electron v22+ https://github.com/saltyshiomix/nextron/issues/299 https://github.com/saltyshiomix/nextron/issues/346 https://github.com/saltyshiomix/nextron/issues/384

that aren't fixes. That is basically turning of nodeIntegration: false and remove webpack config from next.config.js which is not a fix.

[squirelo]

@MaxLiebsch Did you find a way to make it works? Thx

[squirelo]

@saltyshiomix Hi, I've been stuck since many months on this one. Is there a way to turn nodeintegration:true while using electron v22+ ? Thx for your help

[openarun]

The issue still persists from electron v22 to v29 too. Either need a fix with using nodeintegration:true or an alternative method to it. @saltyshiomix

[squirelo]

@saltyshiomix It has been a year you removed all possibility to use nextron with nodeintegration true