VueJS / Electron : How to get "child_process" working? - vue.js

In my VueJS / Electron app, I need to call an exe file (working under windows environment).
In my project, I made this js file:
import exec from "child_process";
export default {
opt() {
exec("tool.exe", function(err, data) {
console.log(err);
console.log(data.toString());
});
}
};
However, when I launch the app with "npm run electron:serve" I got this error into the debug tool of Electron :
[Vue warn]: Error in created hook: "TypeError: child_process__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function"
I don't know where I'm wrong...
Any ideas ? Thanks ;)

Related

Error in opening a pre-filled realm db in react-native app - TypeError: undefined is not a function in asyncGeneratorStep

I'm trying to develop an app as my hobby project using React Native + realm DB.
I just want to connect to pre-filled realm DB (sitting inside app-bundle) and do some CRUD ops using view controls.
I've followed the steps in the react-native realm docs, however, I'm facing a strange issue while executing following code.
export async function checkDBFn(): Promise<boolean> {
let bundlePath = RNFS.MainBundlePath + '/OlamDB.realm';
const exists = await RNFS.exists(bundlePath);
if (exists) {
try {
Realm.open({
path: bundlePath,
schema: [DBSchema],
schemaVersion: 5,
});
} catch (e) {
if (e instanceof Error) {
let error = e as Error;
console.log(exists, error.message, e.name, e.stack);
// prints true, undefined is not a function, TypeError, and error stack
}
return exists
}
Getting this error stack:
TypeError: undefined is not a function
at ?anon_0_ (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.MyApp:174245:21)
at next (native)
at asyncGeneratorStep (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.MyApp:21697:26)
at _next (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.MyApp:21716:29)
at tryCallOne (/Users/distiller/react-native/sdks/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:53:16)
at anonymous (/Users/distiller/react-native/sdks/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js:139:27)
at apply (native)
at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.MyApp:27425:26)
at _callTimer (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.MyApp:27340:17)
at _callReactNativeMicrotasksPass (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.MyApp:27373:17)
at callReactNativeMicrotasks (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.MyApp:27537:44)
at __callReactNativeMicrotasks (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.MyApp:2485:46)
at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.MyApp:2285:45)
at __guard (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.MyApp:2465:15)
at flushedQueue (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.MyApp:2284:21)
at invokeCallbackAndReturnFlushedQueue (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.MyApp:2278:33)
Initially I thought it as a ployfill issue and I've tried to solve this issue by adding core-js polyfill and importing symbol and iterator, but no luck(actually I got another error, not yet solved :) ).
import 'core-js/stable/symbol';
import 'core-js/stable/symbol/iterator';
Without realm.open() code, application code works fine. I've tested the pre-filled DB with NodeJS code and its working perfectly.
Environment:
Deps:
"core-js": "^3.26.0",
"react": "18.1.0",
"react-native": "0.70.3",
"react-native-fs": "^2.20.0",
"realm": "^11.0.0"
OS: macOS Monterey 12.6 , NodeJS 16.x , Xcode 14.0.1
Could you please help me on this. I truly appreciate any suggestions or comments as well.

TypeError: Cannot read properties of undefined (reading 'call') on build but not dev

I am running a vite.js app with web3 installed.
When I run the app in dev mode, all works fine but when I run it in production mode (build) it fails with:
"TypeError: Cannot read properties of undefined (reading 'call')".
I can confirm that the error comes from the contract method generated from my ABI:
contract.methods.isOwner(sender).call({from: sender}, function (err, res)
If I comment this line out I wont get the error.
You can reproduce the error by using my test repo:
download my test repo:
https://github.com/nybroe/web3_vite_call_of_undefined/tree/main
follow the readme with repo steps:
setup:
download the repro
navigate to "app"
npm install
dev test (which works)
npm run dev
check the console - no errors
build test (which breaks)
npm run build
npm run preview
check the console - you will see the following errors: "TypeError: Cannot read properties of undefined (reading 'call')"
https://stackoverflow.com/a/69021714
I use the option 2
In your vite.config.js, add web3:
import { defineConfig } from 'vite'
export default defineConfig({
⋮
resolve: {
alias: {
web3: 'web3/dist/web3.min.js',
},
// or
alias: [
{
find: 'web3',
replacement: 'web3/dist/web3.min.js',
},
],
},
})

Nuxt, VueJS This must be called within a setup function

I've got a project. It's currently available on a certain website. I need to implement some changes. When I download a project from gitlab and run it throws me an error:This must be called within a setup function.
path: .nuxt/composition-api/index.js
const useContext = () => {
const vm = CompositionApi.getCurrentInstance();
if (!vm)
throw new Error("This must be called within a setup function.");
return {
...(vm[globalNuxt] || vm.$options).context,
route: CompositionApi.computed(() => vm.$route),
query: CompositionApi.computed(() => vm.$route.query),
What is wrong?
I need to run the project to make some changes but can't deploy it on my local server.
Update:
useContex is in default.vue
...
setup (_, { isServer, refs }: any) {
// console.info(context)
// const refs = context.refs
const { store } = useContext()
const { scrolllock } = scrollLock(store)
const locationName = computed(() => store.getters.locationName)
const location = computed({
set (val: boolean) {
store.dispatch('setLocationModal', val)
},
get () {
return store.getters.locationModal
}
})
...
cmd output when I'm trying to go the site
[Vue warn]: [vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once.
ERROR [Vue warn]: Error in data(): "Error: This must be called within a setup function." 22:50:04
found in
---> <Layouts/default.vue> at layouts/default.vue
<Root>
ERROR [Vue warn]: Error in data(): "Error: This must be called within a setup function." 22:50:05
found in
---> <Layouts/default.vue> at layouts/default.vue
<Root>
ERROR [Vue warn]: Error in data(): "Error: This must be called within a setup function." 22:50:24
found in
---> <Layouts/default.vue> at layouts/default.vue
<Root>
From my experience, npm can't install #nuxtjs/composition-api older versions, or stuff like that, so I did uninstall its older version and install the new version and it's worked
here is what I've done
rm -rf node_modules && rm -rf package-lock.json && npm uninstall #nuxtjs/composition-api && npm i #nuxtjs/composition-api && npm i
From the look of things, it seems you
You created another plugin for the VueCompositionAPI when it is installed already e.g #nuxtjs/composition-api
I would advise you to remove any other composition-api from your project and stick to the latest version of the official #nuxtjs/composition-api with Vuex v4 for Nuxt 2
In the latest version of #nuxtjs/composition-api, you could use
const store = useStore();
// OR
const { store } = useContext();
NOTE: You have to define the helper functions like const router = useStore() directly inside your setup() function, and not inside your method, to avoid This must be called within a setup function error.
For those that want to use route
To smooth your upgrade to Nuxt 3, it is recommended not to access route, query, from and params from useContext but rather to use the useRoute helper function.
I don't know what happened there. I deleted that repository and cloned it again.
Next up I did this:
npm init
and then
npm run dev
And it works.

Undefined is not an object (evaluating '_expo.Asset.loadAsync')

I'm creating a project with React-Native, and currently when I try to compile my code I get an error saying undefined is not an object (evaluating '_expo_.Asset.loadAsync')
I'm not entirely sure what had caused this, for I entered a lot of code prior to compiling the project. However, from what I gathered this may have something to do with the fonts I'm importing?
currently this is what my code looks like for importing the font.
async componentDidMount() {
await cacheFonts({
georgia: require('../assets/fonts/Georgia.ttf'),
regular: require('../assets/fonts/Montserrat-Regular.ttf'),
light: require('../assets/fonts/Montserrat-Light.ttf'),
});
this.setState({ fontLoaded: true });
}
This worked for me in similar code:
Install :
npm install expo-font
import * as Font from 'expo-font';
...
...
async componentDidMount() {
await Font.loadAsync({
'josefin-sans-regular': require('./assets/fonts/JosefinSans-Regular.ttf')
});
this.setState({ fontLoaded: true });
}
You didn't show the error-causing code. But you seem to have called in the entire module of Expo.
Maybe you used import * as Expo from "expo" and Expo.Asset.loadAsync
With SDK 33, we’re deprecating imports of most modules from the expo package. Each module must be installed and used.
You can run expo install expo-asset
import { Asset } from 'expo-asset';
...
Asset.loadAsync(modules)
If you want to use it as it is now, you can use this module. expo-codemod

React Native MQTT Module `url` does not exist in the Haste module map

I want to explore this project https://github.com/mqttjs/MQTT.js within the React Native environment. So I did this:
react-native init myproject
npm install --save mqtt
Then I pasted this sample code from the mqttjs into my App.js a bit after the "Welcome to React Native" component.
var mqtt = require('mqtt')
var client = mqtt.connect('mqtt://test.mosquitto.org')
client.on('connect', function () {
client.subscribe('presence', function (err) {
if (!err) {
client.publish('presence', 'Hello mqtt')
}
})
})
client.on('message', function (topic, message) {
// message is Buffer
console.log(message.toString())
client.end()
})
But when I run react-native run-android, I get a compilation error with a message like
Module url does not exist in the Haste module map
I tried replacing mqtt://test.mosquitto.org with a url to my own mosquitto broker with some of these values: mqtt://192.168.0.20, tcp://192.168.0.20, 192.168.0.20. But all these still generated the same error.
What am I doing wrong?
You can solve this by explicitly installing the url module:
npm install url