Cannot use eletron-log on the renderer process

[lcorniglione]

Hi, I would like to mention an issue I'm having with the library. I'm not completely sure if it's a bug or a misuse of it.

I'm building an electron app with create-react-app (which used webpack under the hood), app-react-rewired and typescript. Once I have the web app, I'm embedding it on electron to make it a desktop app. So, in the main electron file I have something like the following:

const log = require('electron-log')
log.initialize()
log.variables.logger = 'gui'
log.transports.console.format = '{y}-{m}-{d} {h}-{i}-{s}.{ms} [{level}] ({logger}) {text}'

On the renderer side, when I try to import electron-log, I'm getting the following error:

../node_modules/electron-log/src/core/Logger.js
SyntaxError: whatever/node_modules/electron-log/src/core/Logger.js: Missing class properties transform.
  12 |  */
  13 | class Logger {
> 14 |   static instances = {};
     |   ^^^^^^^^^^^^^^^^^^^^^^
  15 |
  16 |   functions = {};
  17 |   hooks = [];

I've reading about the error, and it is possible coming from babel. I tried to transpile the lib code with babel and the @babel/plugin-proposal-class-properties to try get rid of the error, so in the config-overrides.js (from app-react-rewired) I set up something like this:

 module.exports = override(
    modifiedConfig,
    removeModuleScopePlugin(),
    ...addBabelPlugins('@babel/plugin-proposal-class-properties',
    babelInclude([path.resolve('src'), path.resolve('../node_modules/electron-log')])
  )

After this setup, I got rid of the previous error, but now I'm having the following error:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (scope.js:3:1)
    at ../node_modules/electron-log/src/core/scope.js (scope.js:30:1)
    at __webpack_require__ (bootstrap:784:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (Logger.js:3:1)
    at ../node_modules/electron-log/src/core/Logger.js (Logger.js:196:1)
    at __webpack_require__ (bootstrap:784:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (index.js:3:1)
    at ../node_modules/electron-log/src/renderer/index.js (index.js:70:1)
    at __webpack_require__ (bootstrap:784:1)
    at fn (bootstrap:150:1)
    at ./src/App.tsx (App.tsx:29:1)
    at __webpack_require__ (bootstrap:784:1)
    at fn (bootstrap:150:1)
    at ./src/index.tsx (index.css:45:1)
    at __webpack_require__ (bootstrap:784:1)
    at fn (bootstrap:150:1)
    at 1 (index.ts:15:1)
    at __webpack_require__ (bootstrap:784:1)
    at checkDeferredModules (bootstrap:45:1)
    at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
    at main.chunk.js:1:101

That error seems to be coming from the fact that the lib is a commonjs module instead of a esmodule. At this point, I'm not sure how to proceed. Am I doing something wrong? Of course, I also tried using the elecronLog variable, but I get the "electronLog is undefined" error.

Whatever help or comment is appreciated. Thanks in advance.

[megahertz]

Thank you for the report. I'll try to find time later to add a CRA project to integration tests. Currently, you can try to configure babel to use ES2022 or newer preset. TBH, I have no idea why the bundler defines module.exports as read only.

[megahertz]

I created CRA 5.0.1, but it works fine out of box, so it's related to a local bundler config.

I'm not sure about the reason why __electronLog is undefined. The injection of this variable to a renderer process is pretty tricky to pass isolation limitations, there's a chance it's related to the bundler too. Anyway, make sure you using the latest electron-log@beta.

A sample project which reproduces the error could be helpful to find the actual reason.

[megahertz]

There's a chance the issue is fixed in 5.1.0. If you still have the issue, please provide a sample project which reproduces that error.