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
Related
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.
I installed the TextToSpeech Cordova Plugin on my Ionic App:
"#ionic-native/text-to-speech": "^5.30.0",
"cordova-plugin-tts": "^0.2.3",
And used it in my vue file:
import { Plugins } from "#capacitor/core";
const { TextToSpeech } = Plugins;
...
methods: {
tts(text) {
TextToSpeech.speak(text)
.then(() => console.log("Success Speach"))
.catch((reason) => console.log(reason));
},
...
console.log(TextToSpeech);
I'm using Capacitor
IOS
When I'm trying to use the plugin on IOS: I get an unknown error: error {}
When I'm printing the plugin, I get: [log] - undefined
Browser
When I'm trying to use the plugin it prints as expecting: TextToSpeech does not have web implementation.
When I'm printing the plugin, I get: Proxy {}
So it's working and loaded in the Browser, but no on the Device.
I found the solution.
first update #ionic-native/core
npm uninstall --save #ionic-native/core && npm install --save #ionic-native/core#latest
The import the plugin like this
import { TextToSpeech } from "#ionic-native/text-to-speech";
I am trying to install Jitsi-Meet plugin in my react-native project. I am trying to create a video/audio conference meetup feature in a website and I want to use react-native for the same purpose.
this is the plugin link.react-native-jitsi-meet - npmjs.org
The plugin gets successfully installed in the package.json
But when I am trying to import in my App.tsx file, it shows me module not found
How can I import the plugin successfully?
Thanks in advance.
1- Something is Missings
There is missing index.js file which is mendatory for npm packge. you can see in screenshot
-
2- You need to perform these steps to resolve this package
Step 1:
make index.js file at node_modules/react-native-jitsi-meet/index.js
Step 2:
and this add code in that index.js file
import { NativeModules, requireNativeComponent } from 'react-native';
export const JitsiMeetView = requireNativeComponent('RNJitsiMeetView');
export const JitsiMeetModule = NativeModules.RNJitsiMeetView;
const call = JitsiMeetModule.call;
const audioCall = JitsiMeetModule.audioCall;
JitsiMeetModule.call = (url, userInfo) => {
userInfo = userInfo || {};
call(url, userInfo);
}
JitsiMeetModule.audioCall = (url, userInfo) => {
userInfo = userInfo || {};
audioCall(url, userInfo);
}
export default JitsiMeetModule;
after these steps everything will be working
Node: you should automate these steps when we install any package by npm or yarn
we can use patch-package to automate these steps
Trying to fetch current Location using geoLocation, it is not working in React Native version(0.60) and above, But it is working in below versions
I realised, GeoLocation folder is not there in nodeModules/React-Native/Libraries,
did they remove it from ReactNative(0.60)?
navigator.geolocation.getCurrentPosition((position) => {
console.log(position)
},
(error) => alert(JSON.stringify(error)),)
Getting this error:
Type Error: Undefined is not an object(evaluating
'navigator.geolocation.getCurrentPosition
It seems geolocation has been removed from react native .60 version.
Try this:
npm install #react-native-community/geolocation --save
react-native link #react-native-community/geolocation
You can check this related SO post for more details.
npm install #react-native-community/geolocation --save
react-native link #react-native-community/geolocation
then:
import Geolocation form '#react-native-community/geolocation';
Geolocation.etCurrentPosition((position) => {
console.log(position)
},
(error) => alert(JSON.stringify(error))
I tried to use await/async on react native,but I got unexpected token error.
I added the code blow in my javascript source file:
var value = await AsyncStorage.getItem('STORAGE_KEY');
My react native version is 0.15.0.
Do I need to add some configuration to use async/await?
I'm using async/await in my react native app and didn't have to do anything to configure or enable it in my project. My usage takes the form of...
async getCache(key){
try{
let value = await AsyncStorage.getItem(key);
return value.json();
}
catch(e){
console.log('caught error', e);
// Handle exceptions
}
}
Note:
If you use an await inside a function that is not explicitly declared with async, you'll end up with an Unexpected token syntax error.
Do I need to add some configuration to use async/await?
Yes. async is still not a finalized part of the specification; they're currently considered "Stage 3" (Candidate).
You can enable all Stage 3 language proposals in your .babelrc by using the stage-3 preset. Alternatively, you can add just the async plugin.
If you have a .babelrc file in the root of your project, you need to add the "react-native" preset:
npm i babel-preset-react-native --save-dev
Then in your .babelrc file add the following:
{
"presets": ["react-native"]
}
More information here.
After reading this comment on the react-native GitHub issues, the following worked for me:
Add the following npm module:
npm install babel-preset-react-native-stage-0 --save
Add the following configuration to your .babelrc file:
{ presets: ['react-native-stage-0'] }
Clear your cache:
$ watchman watch-del-all
$ ./node_modules/react-native/packager/packager.sh --reset-cache