Open raphael10-collab opened 4 years ago
Here is a workaround I came across:
const { remote } = window.require('electron');
const fs = remote.require('fs-extra');
Just replace const fs = remote.require('fs-extra');
with whatever you're trying to import.
Hi @truefusion thanks for answering.
I do not understand what I should do.
In src/services/electron-services/database/index.ts I tried to substitute
//import fs from 'fs-extra'
with
import pathExistsSync from 'fs-extra/pathExistsSync'
import mkdirpSync from 'fs-extra/mkdirpSync'
if (!isRenderer) {
//if (!fs.pathExistsSync(STORE_PATH)) {
//fs.mkdirpSync(STORE_PATH)
if (!pathExistsSync(STORE_PATH)) {
mkdirpSync(STORE_PATH)
}
}
but got "Cannot find module 'fs-extra/pathExistsSync' or its corresponding type declarations" and "Cannot find module 'fs-extra/mkdirpSync' or its corresponding type declarations."
I couldn't provide you with relevant code because I didn't know what exactly you were trying to do. But if you were trying to use the fs-extra
module in an electron environment, then the code I provided should be enough. The code you responded with did not make use of the code I provided. I will assume you know how to program in JavaScript and about the many different ways to import
or require
modules, so I won't go into details for that. But if you are trying to use fs-extra
in an electron environment, then you must use the code I provided in exactly the way I provided it.
In other words, this code
import fs from 'fs-extra'
Becomes this code
const { remote } = window.require('electron');
const fs = remote.require('fs-extra');
Then you can start using fs
anywhere. For example,
const { remote } = window.require('electron');
const fs = remote.require('fs-extra');
if (!isRenderer) {
if (!fs.pathExistsSync(STORE_PATH)) {
fs.mkdirpSync(STORE_PATH)
}
}
I don't know where isRenderer
or STORE_PATH
came from, but I don't need to know.
@truefusion where does window come from?
window
is a pre-defined, global variable. Therefore it comes from the environment, in this case it would be from electron's environment. If you were running your script in a node environment, I would not expect window
to be defined.
@truefusion I tried to put
//import fs from 'fs-extra'
const { BrowserWindow } = require('electron').remote
let window = new BrowserWindow()
const { remote } = window.require('electron');
const fs = remote.require('fs-extra');
import LodashID from 'lodash-id'
//import { app, remote } from 'electron'
import { app } from 'electron'
But I got this error:
A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: Cannot destructure property 'BrowserWindow' of '__webpack_require__(...).remote' as it is undefined.
at eval (webpack:///./src/services/electron-services/database/index.ts?:16:9)
at Module../src/services/electron-services/database/index.ts (/home/marco/webMatters/electronMatters/GGC-Electron
/dist_electron/index.js:1984:1)
at __webpack_require__ (/home/marco/webMatters/electronMatters/GGC-Electron/dist_electron/index.js:20:30)
at eval (webpack:///./src/background.ts?:7:100)
at Module../src/background.ts (/home/marco/webMatters/electronMatters/GGC-Electron/dist_electron/index.js:1960:1)
at __webpack_require__ (/home/marco/webMatters/electronMatters/GGC-Electron/dist_electron/index.js:20:30)
at eval (webpack:///multi_./src/background.ts?:1:18)
at Object.0 (/home/marco/webMatters/electronMatters/GGC-Electron/dist_electron/index.js:2007:1)
at __webpack_require__ (/home/marco/webMatters/electronMatters/GGC-Electron/dist_electron/index.js:20:30)
at /home/marco/webMatters/electronMatters/GGC-Electron/dist_electron/index.js:84:18
actually window, aka win, is already defined in src/background.ts :
import { app, protocol, BrowserWindow, ipcMain, shell, Menu } from 'electron'
async function createWindow() {
win = new BrowserWindow({
But window has to be defined in src/services/electron-services/database/index.ts as well in order to be able to do const { remote } = window.require('electron')
The moment you redefine window
is when you break its original value. I'm not sure what your programming background is, but there is a bigger underlying issue here. It is best if you take this time to come to a deeper understanding of JavaScript and its environments before continuing any further on your project.
Here may be a good place to start: https://developer.mozilla.org/en-US/docs/Web/JavaScript
@truefusion thank for your kind suggestion. I would be grateful if you would have a look at the file where you suggest to modify how to import fs-extra : https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding/blob/master/src/services/electron-services/database/index.ts and tell me how to use window, which cannot be redefined, otherwise its original value will be broken, there
@truefusion thank you for your pull request Doing :
const { app, remote } = window.require('electron')
import Lowdb from 'lowdb'
import FileSync from 'lowdb/adapters/FileSync'
import path from 'path'
const fs = remote.require('fs-extra')
I get : "ReferenceError: window is not defined". So I have to understand how to define window in src/services/electron-services/database/index.ts
How are you compiling your code? And how are you running your app?
This is the complete output:
(base) marco@pc01:~/webMatters/electronMatters/ElectronVueTypeScriptScaffolding$ yarn electron:serve
yarn run v1.22.5
warning ../package.json: No license field
$ vue-cli-service electron:serve
INFO Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin
DONE Compiled successfully in 1725ms
10:26:28 PM
Type checking in progress...
App running at:
- Local: http://localhost:8080
- Network: http://192.168.1.7:8080
Note that the development build is not optimized.
To create a production build, run yarn build.
⠏ Bundling main process...
DONE Compiled successfully in 855ms
10:26:29 PM
File Size Gzipped
dist_electron/index.js 1366.33 KiB 274.09 KiB
Images and other types of assets omitted.
DONE Compiled successfully in 11ms
10:26:29 PM
File Size Gzipped
dist_electron/preload.js 76.96 KiB 5.19 KiB
Images and other types of assets omitted.
INFO Launching Electron...
App threw an error during load
ReferenceError: window is not defined
at eval (webpack:///./src/services/electron-services/database/index.ts?:8:25)
at Module../src/services/electron-services/database/index.ts (/home/marco/webMatters/electronMatters
/ElectronVueTypeScriptScaffolding/dist_electron/index.js:1894:1)
at __webpack_require__ (/home/marco/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/dist_electron
/index.js:20:30)
at eval (webpack:///./src/background.ts?:7:100)
at Module../src/background.ts (/home/marco/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/dist_electron
/index.js:1870:1)
at __webpack_require__ (/home/marco/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/dist_electron
/index.js:20:30)
at eval (webpack:///multi_./src/background.ts?:1:18)
at Object.0 (/home/marco/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/dist_electron/index.js:1917:1)
at __webpack_require__ (/home/marco/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/dist_electron
/index.js:20:30)
at /home/marco/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/dist_electron/index.js:84:18
A JavaScript error occurred in the main process
Uncaught Exception:
ReferenceError: window is not defined
at eval (webpack:///./src/services/electron-services/database/index.ts?:8:25)
at Module../src/services/electron-services/database/index.ts (/home/marco/webMatters/electronMatters
/ElectronVueTypeScriptScaffolding/dist_electron/index.js:1894:1)
at __webpack_require__ (/home/marco/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/dist_electron
/index.js:20:30)
at eval (webpack:///./src/background.ts?:7:100)
at Module../src/background.ts (/home/marco/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/dist_electron
/index.js:1870:1)
at __webpack_require__ (/home/marco/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/dist_electron
/index.js:20:30)
at eval (webpack:///multi_./src/background.ts?:1:18)
at Object.0 (/home/marco/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/dist_electron/index.js:1917:1)
at __webpack_require__ (/home/marco/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/dist_electron
/index.js:20:30)
at /home/marco/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/dist_electron/index.js:84:18
No type errors found
Version: typescript 3.9.7
Time: 3989ms
Your dist_electron/preload.js
script is not designed to properly launch electron.
@truefusion
This is the preload.js I'm using, based on the suggestions here: https://github.com/electron/electron/issues/9920#issuecomment-575839738
const {
contextBridge,
ipcRenderer
} = require("electron");
// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
"api", {
send: (channel, data) => {
// whitelist channels
let validChannels = ["toMain"];
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data);
}
},
receive: (channel, func) => {
let validChannels = ["fromMain"];
if (validChannels.includes(channel)) {
// Deliberately strip event as it includes `sender`
ipcRenderer.on(channel, (event, ...args) => func(...args));
}
}
}
);
How should I modify preload.js in order to properly launch electron?
I tried also with nodeIntegration:true in src/background.ts, thus commenting the preload.js path :
webPreferences: {
nodeIntegration: true,
//nodeIntegration: false,
//contextIsolation: true, // protects against prototype pollution
//preload: path.join(__dirname, "../dist_electron/preload.js"),
},
but still get error: "ReferenceError: window is not defined"
This is as far as I will help you on the matter. https://www.electronjs.org/docs/tutorial/quick-start
For anything else, you'll have to become more acquainted with web technologies.
Thank you very much for your kind valuable contribution
Il gio 17 set 2020, 21:11 truefusion notifications@github.com ha scritto:
This is as far as I will help you on the matter. https://www.electronjs.org/docs/tutorial/quick-start
For anything else, you'll have to become more acquainted with web technologies.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/isaacs/node-graceful-fs/issues/196#issuecomment-694441549, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQYOI2YP3K2UI2KVKIDM5RTSGJNPBANCNFSM4Q2YKXCA .
I have the same problem:
Uncaught TypeError: can't access property "match", e.version is undefined c polyfills.js:30 v graceful-fs.js:104 0da7 graceful-fs.js:96 0da7 chunk-vendors.331b15a4.js:1 Webpack 14 polyfills.js:30:16 c polyfills.js:30 v graceful-fs.js:104 0da7 graceful-fs.js:96 0da7 chunk-vendors.331b15a4.js:1 Webpack 14
I've tried everything under the sun, and don't think it's my npm installation.
Let me know if you would like more info. Meanwhile I'm going to try commenting out:
if (constants.hasOwnProperty('O_SYMLINK') && process.version.match(/^v0.6.[0-2]|^v0.5./)) { patchLchmod(fs) }
which seems to be the problem area so far.
Edit: Ok, I tried editing out the above, and it worked for that problem, but then something similar, same file - shows up. Which makes me think it's not this file at all, but something else.
I had just added this package to read ssl cert/key with. Before that the project was fine running under http.
i faced the same issue and fixed it by downgrading to graceful-fs "4.2.4" version; force it using 'npm install graceful-fs@4.2.4' the recent versions breaking for me
Edit:
Ok I my miss take if you remove the line "implementation: require('sass'),". Then sass-dart will be loaded and it will work.
If sass is used, it failed already in require('sass') because someone require('fs') is used which return an empty object.
This happend only in the browser.
I am using webpack & electron.js
plugins: [
// https://webpack.js.org/plugins/environment-plugin/
new webpack.DefinePlugin({
'process.version': process.version,
}),
],
Uncaught SyntaxError: Unexpected number
)module.exports = {
configureWebpack: {
target: 'electron-renderer'
Running into this as well with react on the latest version. Workarounds aren't really an option for my project. Using react and it's failing here.
module.exports = patch(clone(fs)) <---------
if (process.env.TEST_GRACEFUL_FS_GLOBAL_PATCH && !fs.__patched) {
module.exports = patch(fs)
fs.__patched = true;
}
for me the TEST_GRACEFUL_FS_GLOBAL_PATCH
and __patched
are undefined throwing the error.
This problem is most likely caused by Webpack5. Webpack5 no longer automatically populates the nodejs core module. https://webpack.js.org/configuration/resolve/#resolvefallback
I'm encountering this problem:
I discovered that once I activate this line:
const stateRecord: App = loadSettings()
in /src/store/modules/app.ts
I get this error: "Cannot read property 'match' of undefined"
This is /src/store/modules/app.ts :
this is src/services/electron-services/setting/setting :
and this is electron-services/database/index.ts :
The operation setSettings has the same problem: once I only activate setSettings in src/store/modules/app.ts I get the same error:
src/services/electron-services/setting/setting.ts :
Also modifying
still get this error
This is the line in fileSync.js which seems to be involved:
It seems that the line involved in node_modules/graceful-fs/polyfills.js is the following:
in this function:
vue info:
This is vue.config.js :
And this is webpack.config.js :
This is vue.config.js :
I've put in node_modules/graceful-fs/polyfill.js console.log("process.version: ", process.version) :
And this is the output:
node is working fine:
May be this version "undefined" is due to the fact that I set, to keep the app as safe as possible, nodeIntegration: false in
? But this nodeIntegration: false shouldn't affect the node functioning and in particular the node's process version
I searched in graceful-fs folder for all the occurences of process.version :
Why process.version is "undefined" in node_modules/graceful-fs/polyfills.js ? And why process.version is defined, thus not undefined in node_modules/graceful-fs/graceful-fs.js ?
If I put console.log in:
in node_modules/graceful-fs/graceful-fs.js
I do not get any output...
Putting console.log(process) in node_modules/graceful-js/polyfill.js :
I get :
plenty of other output at the end of which :
So, it seems that process.version used by node_modules/graceful-fs/polyfill.js is: v12.16.3
Why the print of console.log("process.version: ", process.version) gives "undefined" and not v12.16.3 ?
I've put nodeIntegration: true in src/background.ts :
but still get the same error: "Uncaught TypeError: Cannot read property 'match' of undefined"
Anyway, as far as I understand, to keep electron.js app safer nodeIntegration: false in conjunction with the use of preload file should be preferred: https://www.electronjs.org/docs/tutorial/security#electron-security-warnings
I do not understand why process.version is "undefined" in node_modules/graceful-fs/polyfill.js but when printed outside of polyfill.js is v12.16.3
You can find the GitHub repo here: https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding
Looking forward to your kind help