Use Node.js in actions.js

[JokerMartini]

Updated question for clarification in hopes to help others who encounter this same issue.

In previous versions of Quasar Electron apps, prior to Quasar 2.0, I used to be able to import the following modules directly into my store's actions.js file, and any additional *.js files that may be used for helper methods.

const fs = require('fs');
const path = require('path');
const { remote } = require('electron');

However in Quasar 2.0+ it prevents the use of any Node.js packages from being used which has caused a slew or errors to show. I understand in latest Quasar we can no longer use native Node.js packages for security reasons, however there are good explanations of how to solve this problem. I'm hoping someone can help me solve my problem.

Below are the main bits of various js files I currently use in my Electron Desktop app, that utilize the Node.js packages listed above. Could someone explain to me how I can fix my current files to make them useable again in my project using this newly suggested electron-preload.js. Note that I would prefer that I don't have to place all my methods utilizing the Node.js packages into a single js file. That would negate my current organization of code going forward.

utils.js

const fs = require('fs');
const path = require('path');
const { remote } = require('electron');

async parseConfig (filepath) {
        if (!fs.existsSync(filepath)) {
            return { }
        }
        const obj = JSON.parse(fs.readFileSync(filepath, 'utf-8'))
        ...
}

actions.js

import { shell } from 'electron';
function showFile(filepath) {
      shell.openExternal(filepath);
}

Just for clarification these are the errors i now get in Quasar 2.0 when tryin to run dev or build. Which is due to it no long allowing for Node.js packages to be imported.

Module not found: Can't resolve imported dependency "fs"
Did you forget to install it? You can run: yarn add fs 

 App •  COMPILATION FAILED  • Please check the log above for details.

Module not found: Can't resolve imported dependency "path"
Did you forget to install it? You can run: yarn add path

 App •  COMPILATION FAILED  • Please check the log above for details.

Module not found: Can't resolve imported dependency "remote"
Did you forget to install it? You can run: yarn add remote

 App •  COMPILATION FAILED  • Please check the log above for details.

Module not found: Can't resolve imported dependency "shell"
Did you forget to install it? You can run: yarn add shell

 App •  COMPILATION FAILED  • Please check the log above for details.

[yusufkandemir]

Hi, @JokerMartini 👋 Please see https://quasar.dev/start/upgrade-guide#nodejs-polyfills

[yusufkandemir]

You can still have multiple files, as long as you import and use them from the Electron preload script. You can take a look at the docs for more info: https://quasar.dev/quasar-cli/developing-electron-apps/electron-preload-script
It suggests using contextBridge, you can get more information about it on Electron Docs.
I don't see how you import and use the functions you've shown in your UI, but you can do something like this:

// In Preload script
import { showFile } from 'src/actions' // or wherever the actions.js file is
// ...
contextBridge.exposeInMainWorld('actions', {
  showFile,
})

// In UI Code
window.actions.showFile('path')

[JokerMartini]

The code i wrote above was just pseudo code. Sorry if it didn't read correctly, but i believe what you have shown here showcases exactly what i needed. I'm going to give it a shot and check it out right now. Thank you very much. ill report back after i test it :)

[JokerMartini]

@yusufkandemir I tried what you said but still get an import error. I'm not not why it can't resolve this path?

[yusufkandemir]

@JokerMartini can you try using a relative path instead ../src/utils, so we can be sure that importing from outside works. Please let me know if that one work, after that I will take a look at Webpack aliases to also make src/utils work.

[JokerMartini]

works like a charm. thank you for all the help. I would suggesting putting something along these lines in the help docs so people better understand a real world example.

Thank you!!