Uncaught TypeError: Illegal constructor and Cannot read properties of null

[oguh43]

Code fragment:

const {MathfieldElement} = require("mathlive")
const mfe = new MathfieldElement();
mfe.value = '\\frac{\\pi}{2}';
document.body.appendChild(mfe);

Runtime error:
Uncaught TypeError: Illegal constructor at new re (VM770 mathlive.min.js:3057:4258)

Used in: electron, preload.js (after DOM has loaded)

Description

I installed the mathlive npm package - version 0.98.6
Added the demo code found in docs.

Steps to Reproduce

1. npm install --save mathlive
2. Add demo code to preload.js
3. Error

Actual Behavior

Error

Expected Behavior

No error

Environment

"engines": {
	"npm": ">=10.5.0",
	"node": ">=21.7.1"
}

mathlive: 0.98.6

Is this a regression: No clue

MathLive version: 0.98.6
Operating System Linux - Pop!_OS 22.04 LTS x86_64

Browser Electron based chromium - electron version: ^29.1.6

[arnog]

When creating your browser window, you need to set the nodeIntegration and contextIsolation properties as follow:

  const win = new BrowserWindow({
    width: 800,
    height: 600,
    sandbox: false,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, "preload.js"),
    },
  });

[oguh43]

When creating your browser window, you need to set the nodeIntegration and contextIsolation properties as follow:

  const win = new BrowserWindow({
    width: 800,
    height: 600,
    sandbox: false,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, "preload.js"),
    },
  });

Thanks, got further, now crashes when trying to set up event listeners for the virtual keyboard

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at new ns (/node_modules/mathlive/dist/mathlive.min.js:3056:17388)

[oguh43]

Also

mathlive.min.js:3056 Uncaught TypeError: Cannot read properties of null (reading 'visible')

When trying to use the input box that gets created

[arnog]

Great to hear you're making some progress.

Unfortunately, I had never used Electron until investigating this report. With a big of googling I was able to offer the suggestions above. However, it seems to me that there's no reason why a mathfield wouldn't work in an Electron context, but that Electron has to be configured correctly to use web components. It sounds like there might be more adjustments needed to get the full functionality of mathfields.

I would suggest the following:

• get in touch with forums dedicated to Electron to see if people with more experience integrating web components in Electron may have some suggestions
• use the debug version of MathLive (by importing "mathlive/dist/mathlive.js") to get more details on where the issues are (see https://cortexjs.io/mathlive/guides/integration/#files)

If there is indeed something that needs to be fixed in MathLive, don't hesitate to file an issue and I'd be happy to investigate.

[oguh43]

Great to hear you're making some progress.

Unfortunately, I had never used Electron until investigating this report. With a big of googling I was able to offer the suggestions above. However, it seems to me that there's no reason why a mathfield wouldn't work in an Electron context, but that Electron has to be configured correctly to use web components. It sounds like there might be more adjustments needed to get the full functionality of mathfields.

I would suggest the following:

• get in touch with forums dedicated to Electron to see if people with more experience integrating web components in Electron may have some suggestions
• use the debug version of MathLive (by importing "mathlive/dist/mathlive.js") to get more details on where the issues are (see https://cortexjs.io/mathlive/guides/integration/#files)

If there is indeed something that needs to be fixed in MathLive, don't hesitate to file an issue and I'd be happy to investigate.

Thank you very much for your time and effort, will do :)

[oguh43]

Great to hear you're making some progress.

Unfortunately, I had never used Electron until investigating this report. With a big of googling I was able to offer the suggestions above. However, it seems to me that there's no reason why a mathfield wouldn't work in an Electron context, but that Electron has to be configured correctly to use web components. It sounds like there might be more adjustments needed to get the full functionality of mathfields.

I would suggest the following:

• get in touch with forums dedicated to Electron to see if people with more experience integrating web components in Electron may have some suggestions
• use the debug version of MathLive (by importing "mathlive/dist/mathlive.js") to get more details on where the issues are (see https://cortexjs.io/mathlive/guides/integration/#files)

If there is indeed something that needs to be fixed in MathLive, don't hesitate to file an issue and I'd be happy to investigate.

Figured it out, elecron needs to be configured as you have sent and the require("mathlive") needs to be in window.addEventListener('DOMContentLoaded', () => {. Reopenning so you wil see this and perhaps add in some form to your documentation :)

[arnog]

Great! Thanks for letting me know.

[oguh43]

Great! Thanks for letting me know.

You can close this now as resolved :D