TypeError: Cannot read property 'Menu' of undefined when loading the module via require('electron').remote.require('electron-spellchecker')

[MTRNord]

This line fails when I load it using require('electron').remote.require('electron-spellchecker') in render. https://github.com/electron-userland/electron-spellchecker/blob/91e7be8e8957440f5dd039098364965e59605691/src/context-menu-builder.js#L4

[MTRNord]

PS I use reactjs with webpack

[MTRNord]

Fixed via adding and resolve alias

[sachinrekhi]

@MTRNord I'm running into this same error. Would you mind providing more details on how you resolved it? Wasn't sure exactly what "fixed via adding and resolve alias" meant. Thanks!

[anaisbetts]

A much better alternative to using Webpack with Electron apps is to use electron-forge, which handles all of the things that Webpack does with zero configuration, and bonus, also doesn't have weirdo bugs like this :)

[MTRNord]

@paulcbetts sadly in my case I wasn't able to use it as the project is mainly aimed for web and the run only one webpack config for both electron and web :/

[eteisman]

My application uses SystemJS. It is not an option to rewrite it to WebPack, just for one library. When I read "please use reactjs plus webpack", I am not happy. That is not a solution.

When I load the package with SystemJS, the first few lines immediately throw an error: var path = require('path'); var fs = require('fs');

I dont think this component can be used with SystemJS

[eteisman]

OK, I have figured it out.

This article had the solution for me: https://ourcodeworld.com/articles/read/485/how-to-implement-and-enable-the-grammar-and-spellchecker-in-electron-framework

I did not use SystemJs or Webpack. Instead I just loaded that code immediately in the'index.html' file that is loaded by my electron script on startup, as below.

Some of the code need to be loaded in the document.onLoad event. Also to run it properly I had to rebuild my node libraries, as described in the article above.

      const electronSpellchecker = window.require('electron-spellchecker');
      window.addEventListener('load', function () { loadSpellChecker() } );

      function loadSpellChecker() {
        if (window.require) { // only in Electron, not in the browser

          // Retrieve required properties
          const SpellCheckHandler = electronSpellchecker.SpellCheckHandler;
          const ContextMenuListener = electronSpellchecker.ContextMenuListener;
          const ContextMenuBuilder = electronSpellchecker.ContextMenuBuilder;

          // Configure the spellcheckhandler
          window.spellCheckHandler = new SpellCheckHandler();
          window.spellCheckHandler.attachToInput();

          // Start off as "US English, America"
          window.spellCheckHandler.switchLanguage('en-US');

          // Create the builder with the configured spellhandler
          let contextMenuBuilder = new ContextMenuBuilder(window.spellCheckHandler);

          // Add context menu listener
          let contextMenuListener = new ContextMenuListener((info) => {
              contextMenuBuilder.showPopupMenu(info);
          });

          console.log('SPELLCHECKER', window.spellCheckHandler);
        }
      }

In order to run, I still needed to rebuild the native librabry, as stated in the article mentioned previously.

Two usefull node tools for rebuilding native node libraries are: electron-rebuild and windows-build-tools. The "electron-rebuild" can rebuild native libraries. For that you need Python and/or MSBuild. These can be installed with "windows-build-tools"

So 'npm install windows-build-tools --save-dev', plus 'npm install electron-rebuild --save-dev' Then run the command ./node_modules/.bin/electron-rebuild to rebuild the libraries