node-loader | WASM loader for Node

I have spent multiple days reading through tickets and documentation trying to find a solution to this issue and no suggestion has worked. It seems a major oversight or I'm a complete dummy.

Simply, what I want to do is access the electron api from within the application, for example I would like a button that one could click to close, resize etc. the window via the BrowserWindow object from within the render/preload scripts.

I am compiling it via electron forge w/ webpack from example repo provided by electron forge (as opposed to separate webpack), I have nodeIntegration: true, contextIsolation: false and enableRemoteModule: true, the package.json also has these options set.

This is the starting project I've used: https://www.electronforge.io/config/plugins/webpack

From reading other tickets the generally recommended way is to require the remote module via various methods, get the window object and close / execute your action. The issue being this always returns null when using:

• const remote = require('@electron/remote')
• const remote = require('electron').remote
• const { remote } = require('electron')

I've tried various sources but for example nothing in this ticket works: Atom Electron - Close the window with javascript

I also read this article that seems to say the remote module was deprecated and is no longer used, however the code in that doesn't work either: https://www.npmjs.com/package/@electron/remote

I have created a git repo with the code I'm trying to use: https://github.com/MajorFailz/electron-problem-example

Please help! I can't really continue development on my project using electron if I can't control the application from within the application. I'm perfectly happy to accept if I've been dumb somehow and missed something vital or fundamental, but as I say it feels like these are the first things any electron noobie would need to know but I'm lost =/

Bonus points if you can provide me a demonstrable example of it working I could look at.

Thanks in advance!

Edit: versions from package

I'm working on a React application where I want conditional rendering of FontAwesome icons, but at the moment it's not changing when it should.

I inspected elements and found that FontAwesome is commenting out the React component and replacing it with the svg of the icon, so when I go back to change the FontAwesome icon in React, it has no effect. Below is an example of this

I recently tweaked my webpack modules in my React/Electron.js project to compile less files using less-loader, css-loader, and MiniCssExtractPlugin.loader instead of the style-loader since there is no window defined during part of the compilation, but now the font awesome icons are showing up as boxes and I'm not sure why that is.

The font awesome icons showed up fine when I had style-loader instead of MiniCssExtractPlugin.loader, but I only made this change for loading .less files, and not anything else, so I'm confused why this was affected.

I've tried adding .fa, .far, .fas { font-family: FontAwesome !important; } to my index.less file as suggested here, but this didn't help at all.

I also tried adding in the font-awesome-loader, but this seems to have a dependency of sass-loader@*, which I'm not using.

What's causing Font Awesome to load with style-loader but not MiniCssExtractPlugin.loader? I've included my webpack modules and my font-awesome import below:

I'm trying to include a VLC video playing in my Electron app, which is possible through WebChimera.js. This package is distributed a bit weirdly (to me at least), to use it you need to require wcjs-prebuilt, specify some settings in package.json and configure Webpack to allow importing .node files as explained in this Wiki page for WebChimera.js.

However I believe this Wiki page is outdated, as loaders isn't a valid key anymore in a Webpack config. I'm not very experienced using Webpack so most of this is new to me. Also note that this Wiki explanation used a fork of node-loader, although this fork seems to be merged to the actual node-loader now (?).

I now use this Webpack config:

Since I used Electron forge webpack plugin, when I execute npm start, it will cause an error after step Compiling Preload Scripts. It says the error is inside Forge.
I check it out, it's an error in file watcher api, that mainCompilation.fileSystemInfo is undefined, so it cannot read prop createSnapShot function.

What should I do to resolve this error and start my app?

Logs:

I have enabled node.js on one of my domains on a shared server. All management actions are done from the console of Plesk Obsidian 18.0.20. I see that Plesk manages nodejs through Phusion Passenger 6.0.6.

I am unable to create an express server. The startup of my nodejs app fails with the message:

ENV:

• Electron: v11.0.3
• Node: v14.15.1
• OS: win10 2020 x64

package.json - build

When building and starting a production build of our application, no css is loaded. CHecking the devtools, I can see a myriad of errors and warnings:

I do not experience any of these problems, when starting the app in dev mode. Also, other assets like images or fonts are loaded correctly. We use scss and import the global stylesheet in _app.tsx like this:

Does anyone know why this error is occurring only on the production server and not when I run it locally?