(clone the repo & try it)
I'm working on a desktop app using node, create-react-app, and electron. The following line, recommended here
const { dialog } = require('electron').remote
when added to my store react component (and thus not in the electron main process), causes the following error:
TypeError: fs.existsSync is not a function
getElectronPath
F:/freelance/repos/creative-ontology-editor/node_modules/electron/index.js:8
5 | var pathFile = path.join(__dirname, 'path.txt');
6 |
7 | function getElectronPath() {
> 8 | if (fs.existsSync(pathFile)) {
9 | var executablePath = fs.readFileSync(pathFile, 'utf-8');
10 |
11 | if (process.env.ELECTRON_OVERRIDE_DIST_PATH) {
I believe this is because React or create-react-app specifically blocks/nullifies certain node.js modules like fs, but I could be wrong. Note that this error happens inside the electron module when I include the above line, not in my own code.
My goal is to have my desktop app able to save and load files to the user's machine, the way something like Word or Excel does.
I've called const fs = window.require('fs'); in my react component, which I think I'm not supposed to do, but also, since this is in the actual electron module's index.js, I made sure that it also calls it, which it does: var fs = require('fs'). There was no change in behavior when I switched my call in the react component to const fs = window.require('fs').
I've also made sure to set webPreferences.nodeIntegration to true in my electron main process, to no avail.
Related
I am trying to use Robot.js inside of a React.js application. I have Robot.js installed and can run it to get the results in a separate file. I cannot find a way to run Robot.js inside a React component because I get an error "robot.getMousePos()" is not a function. All I really need is the value of "hex". Is there a way to export the variable into my react component, Or even better run the Robot.js code in the same component without getting errors?
This is the Robot.js example:
const color = () => {
// Get pixel color under the mouse.
var robot = require("robotjs");
// Get mouse position.
var mouse = robot.getMousePos();
// Get pixel color in hex format.
var hex = robot.getPixelColor(mouse.x, mouse.y);
console.log("#" + hex + " at x:" + mouse.x + " y:" + mouse.y);
};
color();
it returns the value of "hex" which is equal to the hexidecimal color under the mouse at the given x and y coords (#1e1e1e at x:746 y:511)
I am trying to get that output into my React component whose code is here:
import React from "react";
const Robot = () => {
return (
<div>
<h1>Robot</h1>
</div>
);
};
export default Robot;
Robot.js is a library for desktop automation in Node.js.
React is a library for doing DOM processing in a browser.
You can't run code that depends on Node.js in a browser.
If you want these two bits of code to work together then you'll need to write a web service that they can communicate through (or run your code with something like Electron and then use the IPC API to communicate between the main and renderer processes).
Indeed you will have to run it with some buddy as Electron.
I paste below a briefing about how you could reach it with Electron from here:
I was having a similar issue.
First I deleted entire node_modules directory and reinstalled them
again by running npm installin project directory (you have to define
all modules&versions in a package.json file for that).
Then removed robotjs from node_modules directory manually. And then
ran .\node_modules.bin\electron-rebuild.cmd.
After that I installed robotjs again by npm install robotjs.
Then cd .\node_modules\robotjs and node-gyp rebuild --runtime=electron
--target=1.3.3 --disturl=https://atom.io/download/atom-shell --abi=48 (1.3.3 is current version of electron)
and problem solved!
I had a similar issue, hopefully I was already using Electron and this worked fine.
I have a project called Frontend-Core-Components which contains my App component.
I have another project (let's just call it Alpha for now) which containsAlphaApiService, which I pass to the App component via its props, I do this in Alpha's index.tsx
Alpha uses Create-react-app, I'm using rescript to modify the Webpack config to add Frontend-core-components as a module, Inside this Webpack configuration, I use resolve.alias to map imports from Alpha index.tsx to the Frontend-Core-Components.
It all seems to work, except when I run the build from Alpha project, I encounter the following.
SyntaxError: /Users/coolguy/project/alpha/src/index.tsx: Unexpected token (9:11)
7 |
8 | window.onload = () => {
> 9 | render(<App apiService={new AlphaApiService()} />,
document.getElementById('root'))
| ^
10 | }
11 |
any ideas?
You need to compile your import module, before importing it.
I would suggest checking out this project to create React component libraries.
https://github.com/KaiHotz/react-rollup-boilerplate
Or you can include the Frontend-Core-Components in your ts-loader(or babel-loader) rule.
I have a Vue.js app. This app is a progressive web app, so it's intended to primarily run on the client-side. However, during the initial start-up, I need to authenticate the user in my Azure Active Directory, get data associated with their account, and store it for offline use.
I have a server-side API in place already for retrieving the data associated with a user account. I also know how to store it for offline use. However, my question is: how do I authenticate with the Microsoft Graph from my Vue.js app? Everything I see relies on using Node.js middleware, but unless I'm misunderstanding something, my progressive web app isn't a Node.js app. It's just straight up JavaScript, HTML, and CSS.
If the user closes the app, then revisits it in a couple of days, I believe I would need to use the refresh token to get a new access token. Still, once again, everything I see relies on Node.js middleware. I believe I need a solution that works purely in Vue.js / JavaScript. Am I mistaken?
Updates
1) Installed the Microsoft Graph Client via NPM (npm install #microsoft/microsoft-graph-client --save). This installed v1.7.0.
2) In my Vue.js app, I have:
import * as MicrosoftGraph from '#microsoft/microsoft-graph-client';
import * as Msal from 'msal';
let clientId = '<some guid>';
let scopes = ['user.read'];
let redirectUrl = 'http://localhost:1234/'; // This is registered in Azure AD.
let cb = (message, token, error, tokenType) => {
if (error) {
console.error(error);
} else {
console.log(token);
console.log(tokenType);
}
}
let reg = new Msal.UserAgentApplication(clientId, undefined, cb, { redirectUrl });
let authProvider = new MicrosoftGraph.MSALAuthenticationProvider(reg, scopes);
The last line generates an error that says: export 'MSALAuthenticationProvider' (imported as 'MicrosoftGraph') was not found in '#microsoft/microsoft-graph-client'
The last line generates an error that says: export 'MSALAuthenticationProvider' (imported as 'MicrosoftGraph') was not found in '#microsoft/microsoft-graph-client'
This error occurs because the main script (lib/src/index.js) of #microsoft/microsoft-graph-client does not export that symbol. You'll notice that logging MicrosoftGraph.MSALAuthenticationProvider yields undefined. Actually, the main script is intended to be run in Node middleware.
However, #microsoft/microsoft-graph-client provides browser scripts that do make MSALAuthenticationProvider available:
lib/graph-js-sdk-web.js
browserified bundle (not tree-shakable)
sets window.MicrosoftGraph, which contains MSALAuthenticationProvider
does not export any symbols itself
import '#microsoft/microsoft-graph-client/lib/graph-js-sdk-web'
let authProvider = new window.MicrosoftGraph.MSALAuthenticationProvider(/* ... */)
demo 1
lib/es/browser/index.js
ES Modules (tree-shakable)
exports MSALAuthenticationProvider
import { MSALAuthenticationProvider } from '#microsoft/microsoft-graph-client/lib/es/browser'
let authProvider = new MSALAuthenticationProvider(/* ... */)
demo 2
lib/src/browser/index.js
CommonJS module (not tree-shakable)
exports MSALAuthenticationProvider
import { MSALAuthenticationProvider } from '#microsoft/microsoft-graph-client/lib/src/browser'
let authProvider = new MSALAuthenticationProvider(/* ... */)
demo 3
I've been using vue-cli since some time now, and still have not fully understood how file loading is done. I've read documentation and some blogs and helped me to deal with it since now.
I'd like to import static .js files with some constants in a component. I don't want them to be bundled at deployment, so they can be found and changed easily, directly in the server if needed without having to rebuild the whole project.
I tried to place them in /public/constants/foo.js directory and point to them using absolute paths in different ways
import FOO from '/constants/foo.js'; // Not working
const FOO = require('/constants/foo.js'); // Not working
How can I achieve this?
If I understand well your project arch is like
/root
|__/public
| |__/img
| |__/css
| |__/constants
| |__/foo.js
| |__/bar.js
|__/webpack.config.js
In your webpack.config.js create a new entry like
module.exports = {
entry: './public/index.js'
};
Then create a index.js file inside your public directory and import your foo.js
import foo from './constants/foo';
Of course your foo.js should export something like
export default function foo() {
//
}
Hoping that will help you.
I have two js files in Electron (which uses Nodejs) and I try to export from one and require in another.
app.js:
App = {
server: {
host: '192.168.0.5',
user: 'root',
}
ping: function() {
}
}
exports.App = App
I have tried every way possible of exporting, including module.exports = App, module.exports.App = App and so on.
ping.js first attempt:
var App = require('../app.js') // I have also tried adding .App to the end
console.log(App) // This returns an object which contains the App object
ping.js second attempt:
var App = require('../app.js')
App.x = 'y'
console.log(App) // this returns an object which contains the App object and the x property
It may appear that App contains another App object, but console.log(App.App) says it doesn't exist.
The first thing I'd to do solve this would be to make sure I'm using the full path to the required module, as in:
const Path = require('path')
const App = require(Path.join(__dirname,'../app')) // the .js isn't needed here.
Note that this assumes that the app.js file is in the immediate parent directory of the one in which the application runs.
If that doesn't work, I'd make sure the files are where you think they are, and that the process you're running is located within the file system where you think it is. You can determine this by adding this to the top of your main script file:
console.log("current working directory:",process.cwd())
Or in es6:
console.log(`current working directory: %s`, process.cwd())
If the printed directory doesn't match your assumptions, modify your require statement accordingly.
And for the record, the "correct" way to export your App map would be to:
const App = {
...
}
module.exports = App
Or using es7:
export default App = {
...
}
(See export for more on es7 modules.)
Either way, you'd then require the module as:
const App = require(PATH_TO_APP)