Can yet-another-react-lightbox be used in an Electron.js app?

[davidburson]

The YARL demos/examples and API look great, exactly what I need in my Electron.js app. I'm using Node 18.16.1, React 18.2.0, Electron 25.1.1, Babel 7.6.0 (I'm happy to upgrade Babel if that will help). Unfortunately, best info I've been able to find, Electron won't support ESMs until version 27 is available.

I studied this discussion and concluded that I should be able to use YARL in an Electron app, even though YARL is ESM-only. If I understand correctly, I should be able to use dynamic imports to import YARL and its plugins. I added an exclusion in my babel.config.js to prevent Babel from converting dynamic imports. This is my babel.config.js:

module.exports = {
  sourceMap: false,
  presets: [
    ['@babel/preset-react', {
      'exclude': ['@babel/plugin-transform-modules-commonjs']
    }]
  ],
  plugins: [
    '@babel/plugin-transform-modules-commonjs',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-optional-chaining'
  ]
};

In one of my components, I added this code to import YARL:

import('yet-another-react-lightbox').then(module => { 
  Lightbox = module.default;
  console.log('Lightbox ok');
});

The project builds and I have verified that the above import code is copied unmodified to Babel's output. When I run, though, it just hangs - nothing happens, except Chrom DevTools gives the dreaded "Devtools was disconnected from the page" message.

I updated my start script to electron . --enable-logging to see any Electron errors in the terminal. Electron helpfully reports, "Renderer process crashed".

Surely I'm missing something! How can I use YARL in my Electron app?

[igordanchenko]

Hi there!

Based on my research, modern Electron toolkits / boilerplates handle 3rd-party ESM packages with no additional configuration, and YARL works out of the box.

Here are Electron toolkits I tested and confirmed YARL working with no issues:

• electron-forge + webpack + babel
• electron-vite
• electron-react-boilerplate

I hope this helps!

[igordanchenko]

Just out of curiosity, what kind of tooling / boilerplate are you using? I've just tried electron-react-boilerplate and can confirm the same result - YARL works fine out of the box.

[davidburson]

This project has not used any tooling/boilerplate along the lines of electron-vite or electron-react-boilerplate. The project was created several years ago from scratch.

Originally, I believe this project began by manually creating a folder structure and copying a stripped-down package.json, index.js (starting point of Electron main process), index.html, main.js (starting point for the Electron Renderer process), and a few config files from another manually-created Electron/React project. The only config file I think is likely significant for this issue is babel.config.js. I'm happy to list all our config files but don't want to clutter your life with the list unless you want it!

WebStorm is the IDE I'm using, and I found in the WebStorm Languages and Frameworks setting that the JavaScript language version is set to "ECMAScript 6+", which is explained as "ECMAScript 2015+, some proposals and JSX".

I recently upgraded the project to the latest Node, Electron, and Electron-builder versions. I'm in the process of upgrading from React 16.13 to React 18. The React 18 upgrade forced me to abandon some dead packages and I selected YARL to replace one of them.

Normal import statements are used throughout the project, but Babel transpiles them into require statements. That, of course, doesn't work with YARL. But as noted in my original post, when I try to use dynamic import for YARL, the Electron Renderer process crashes with no explanation.

As far as I can tell, this is a pretty standard from-scratch Electron/React project. Seems like there ought to be some way to use YARL in it. I sure appreciate any thoughts you have!

[igordanchenko]

Thank you for the additional details. Unfortunately, I have no idea what was considered "a pretty standard from-scratch Electron/React project" several years ago. All modern quick start templates that I've tried didn't require any additional tweaks and were able to handle 3rd-party esm packages. Please feel free to share a trimmed-down project skeleton if you require further assistance.

[davidburson]

Thanks much for your help. I'm looking into updating the project to be more current in its tooling. That may resolve this issue. I'll post here when I have something working that could be helpful to others with older projects. Or if I get really stuck again, I'll create and share a minimal project to demonstrate the issue.

[davidburson]

We ended up doing a massive architectural conversion so our Electron app now uses Create React App. With that done, yarl works as expected.