hey guys I am stuck on this webrtc thing for a while
I am getting the following error when trying to get a peer connection in an ejected expo app:
TypeError: null is not an object (evaluating 'WebRTCModule.peerConnectionInit')
at node_modules\expo\build\environment\react-native-logs.fx.js:null in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError
at node_modules\expo\build\errors\ExpoErrorManager.js:null in errorHandler
at node_modules\expo\build\errors\ExpoErrorManager.js:null in <anonymous>
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:null in ErrorUtils.setGlobalHandler$argument_0
at node_modules\#babel\runtime\helpers\asyncToGenerator.js:null in asyncGeneratorStep
at node_modules\#babel\runtime\helpers\asyncToGenerator.js:null in _next
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:null in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in flushedQueue
I have added the following permissions in android-manifest based on this blog:
https://github.com/react-native-webrtc/react-native-webrtc/blob/master/Documentation/AndroidInstallation.md
<uses-feature android:name="android.hardware.audio.output" />
<uses-feature android:name="android.hardware.microphone" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.INTERNET" />
And my code is very simple, even I can understand it but Idk why its broken.
import {
ScreenCapturePickerView,
RTCPeerConnection,
RTCIceCandidate,
RTCSessionDescription,
RTCView,
MediaStream,
MediaStreamTrack,
mediaDevices,
registerGlobals
} from 'react-native-webrtc';
export const createMyPeerConnection = () => {
var peerConnection = null;
let peerConstraints = {
iceServers: [
{
urls: 'stun:stun.l.google.com:19302'
}
]
};
peerConnection = new RTCPeerConnection(peerConstraints);
}
I looked at some existing answers but they did not help :
React Native: Error [TypeError: null is not an object (evaluating 'WebRTCModule.peerConnectionInit')]
Related
I am developing an npm package. And I use third party library components inside my package. But I am having trouble importing components inside a package. For example with https://github.com/rlemaigre/Easy-DnD:
My CustomPackageComponent.vue:
<template>
<div>
<drop-list :items="[1, 2]">
<template v-slot:item="{item}">
<drag :key="item">
{{ item }}
</drag>
</template>
</drop-list>
</div>
</template>
<script>
import Vue from "vue";
import {DropList, Drag} from "vue-easy-dnd";
export default {
data() {
return {
someVar: 'foo'
}
},
components: {DropList, Drag}
}
</script>
And next in my index.js file:
import CustomPackageComponent from './components/CustomPackageComponent'
export {
CustomPackageComponent
}
Finally I use in my app. SomeAppComponent.vue:
<template>
<div>
<custom-package-component/>
</div>
</template>
<script>
import {CustomPackageComponent} from '#my-package-scope/some-name'
export default {
components: {CustomPackageComponent},
}
</script>
I have errors:
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'on')"
found in
---> <DropList>
...
TypeError: Cannot read properties of undefined (reading 'on')
at setCurrentInstance (app.js?id=be8d63a4f2dc42c0bbb5:70359:21)
at normalized (app.js?id=be8d63a4f2dc42c0bbb5:72030:9)
at Proxy.renderSlot (app.js?id=be8d63a4f2dc42c0bbb5:71709:13)
at app.js?id=be8d63a4f2dc42c0bbb5:69361:1276
at Proxy.renderList (app.js?id=be8d63a4f2dc42c0bbb5:71658:22)
at Proxy.__vue_render__$4 (app.js?id=be8d63a4f2dc42c0bbb5:69361:1229)
at VueComponent.Vue._render (app.js?id=be8d63a4f2dc42c0bbb5:72308:28)
at VueComponent.updateComponent (app.js?id=be8d63a4f2dc42c0bbb5:72748:27)
at Watcher.get (app.js?id=be8d63a4f2dc42c0bbb5:73932:33)
at new Watcher (app.js?id=be8d63a4f2dc42c0bbb5:73922:51)
[Vue warn]: Error in beforeMount hook: "TypeError: Cannot read properties of undefined (reading 'off')"
found in
---> <BVTransporter>
...
TypeError: Cannot read properties of undefined (reading 'off')
at setCurrentInstance (app.js?id=be8d63a4f2dc42c0bbb5:70357:51)
at VueComponent.Vue._render (app.js?id=be8d63a4f2dc42c0bbb5:72330:13)
at VueComponent.updateComponent (app.js?id=be8d63a4f2dc42c0bbb5:72748:27)
at Watcher.get (app.js?id=be8d63a4f2dc42c0bbb5:73932:33)
at new Watcher (app.js?id=be8d63a4f2dc42c0bbb5:73922:51)
at mountComponent (app.js?id=be8d63a4f2dc42c0bbb5:72765:5)
at VueComponent.Vue.$mount (app.js?id=be8d63a4f2dc42c0bbb5:79061:12)
at VueComponent.Vue.$mount (app.js?id=be8d63a4f2dc42c0bbb5:81625:18)
at init (app.js?id=be8d63a4f2dc42c0bbb5:136420:13)
at createComponent (app.js?id=be8d63a4f2dc42c0bbb5:139300:9)
[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'removeAttribute')"
TypeError: Cannot read properties of undefined (reading 'removeAttribute')
at Array.updateAttrs (app.js?id=be8d63a4f2dc42c0bbb5:140051:13)
at patchVnode (app.js?id=be8d63a4f2dc42c0bbb5:139636:62)
at updateChildren (app.js?id=be8d63a4f2dc42c0bbb5:139515:9)
at patchVnode (app.js?id=be8d63a4f2dc42c0bbb5:139641:29)
at VueComponent.patch [as __patch__] (app.js?id=be8d63a4f2dc42c0bbb5:139804:9)
[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'on')"
found in
---> <BVTransporter>
...
If I use this code without package everything is ok. I think, that is's something with vue lifecycle, but I don't have any idea how it fix.
Maybe I need to register my package by another way.
I use npm link for local development.
Also I try to import with Vue.Component(...) in CustomPackageComponent.vue:
<template>
<div>
<drop-list :items="[1, 2]">
<template v-slot:item="{item}">
<drag :key="item">
{{ item }}
</drag>
</template>
</drop-list>
</div>
</template>
<script>
import Vue from "vue";
import {DropList, Drag} from "vue-easy-dnd";
Vue.component('drop-list', DropList);
Vue.component('drag', Drag);
export default {
data() {
return {
someVar: 'foo'
}
},
}
</script>
But I have this error:
[Vue warn]: Unknown custom element: <drop-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <CustomPackageComponent> at packages/packages/someScope/someName/src/components/CustomPackageComponent.vue
...
I am building a Nuxt 3 module which has a simple button component.
When the button is clicked, a boolean gets flipped.
The logic for the variable is in a different file, and I am using pinia as a store.
This is the code for the store:
import { defineStore } from "pinia"
export const getLogic = defineStore('logic', {
state: () => {
return{
status: false,
}
},
actions: {
flip() {
this.status = !this.status
},
},
getters: {
getStatus() { return this.status }
}
})
And this is the code for the button component:
<template>
<button onClick="logic.flip()">
<slot />
</button>
</template>
<script lang="ts">
import { getLogic } from "../../stores/logic"
export default {
setup() {
const logic = getLogic()
return { logic }
}
}
</script>
I am testing the module with the "playground environment" and call the button component as such:
<template>
<Button >
Button
</Button>
</template>
When I now click on the button component I get the following error in the browser console:
Uncaught InternalError: too much recursion
callWithAsyncErrorHandling runtime-core.esm-bundler.js:162
callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
which is slightly confusing to me, since I am not using any recursion in my logic.
How can I work around or fix this problem?
In that case, it should be #click="logic.flip".
I recently upgraded my Nuxt 2 project to use Yarn 2 and tweak some dependencies and I looks like Storybook doesn't work with dynamic props as it used to.
Here are the packages that I have installed
"#storybook/addon-essentials": "6.4.19",
"#storybook/addon-postcss": "2.0.0",
"#nuxtjs/storybook": "4.3.0",
LayoutFooter.stories.mdx
import { Meta, Story, Canvas } from '#storybook/addon-docs';
import LayoutFooter from '~/components/layout/LayoutFooter';
<Meta title="Layout/LayoutFooter" component="{LayoutFooter}" />
# Footer
`Footer` component
## Props
<ArgsTable of={LayoutFooter} />
## Example
export const Template = (_args, { argTypes }) => ({
props: Object.keys(argTypes),
template: `<LayoutFooter :logo="logo" />`,
components: { LayoutFooter },
});
Footer
<Canvas>
<Story name="Default" args={{ logo: 'img/logo.svg' }}>
{Template.bind({})}
</Story>
</Canvas>
Also tried
export const Template = (_args, { argTypes }) => ({
props: Object.keys(argTypes),
template: `<LayoutFooter v-bind="$props" />`,
components: { LayoutFooter },
});
I get this error
vue.js:634 [Vue warn]: Invalid prop: type check failed for prop "logo". Expected String, got Undefined
found in
---> <LayoutFooter> at components/layout/LayoutFooter.vue
<Anonymous>
<Anonymous>
<Root>
Am I doing something wrong with the syntax?
I'm using #storybook/vue to make my storybook and I'm trying to embed a view component in my mdx files but I get these errors:
"Cannot read properties of undefined (reading 'id')" and "The above error occurred in the component".
I've followed the documentation and searched on different forums but I can't find it.
my code :
button.docs.mdx
import { Canvas, Meta, Story } from '#storybook/addon-docs';
import Table from "#/stories/stories-component/Table.vue";
<Meta title="Bootstrap Custom Button Documentation" />
# Test
<Canvas>
<Story name="test table">
{() => {
return {
components: { Table },
template: `<Table></Table>`
};
}}
</Story>
</Canvas>
Table.vue
<template>
<p>test component </p>
</template>
<script>
export default {
name:"Table",
props: {}
}
</script>
I am trying to use vue3.0.0 lazy loading in component but getting some warning.
I get this error when i want to get that specific component inside parent component. I mean as i click to show the child component i amm gettign following error. Under the error i've added my code. please help me. I am not very expert in.
runtime-core.esm-bundler.js?5c40:38
[Vue warn]: Unhandled error during execution of setup function
at <AsyncComponentWrapper key=0 >
at <Profile onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > >
at <RouterView>
at <App>
runtime-core.esm-bundler.js?5c40:38
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <AsyncComponentWrapper key=0 >
at <Profile onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > >
at <RouterView>
at <App>
This error also
runtime-core.esm-bundler.js?5c40:2492
Uncaught (in promise) TypeError: Cannot read property 'catch' of undefined
at load (runtime-core.esm-bundler.js?5c40:2492)
at setup (runtime-core.esm-bundler.js?5c40:2574)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155)
at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:7161)
at setupComponent (runtime-core.esm-bundler.js?5c40:7117)
at mountComponent (runtime-core.esm-bundler.js?5c40:5115)
at processComponent (runtime-core.esm-bundler.js?5c40:5090)
at patch (runtime-core.esm-bundler.js?5c40:4684)
at patchBlockChildren (runtime-core.esm-bundler.js?5c40:4999)
at patchElement (runtime-core.esm-bundler.js?5c40:4960)
My code is like
<template>
<div class="profile">
<button #click="show = true"> show lazy loading</button>
<Lazy v-if="show" />
</div>
</template>
<script>
import { defineAsyncComponent, ref } from 'vue'
const Lazy = defineAsyncComponent(() => {
import('../../components/frontend/Lazy.vue')
})
export default {
components: {
Lazy
},
setup(){
const show = ref(false)
return { show }
}
}
</script>
I am also using lazy loading in route level
{
path: '/profile/:id',
name: 'Profile',
component: () => import('../views/frontend/Profile.vue')
}
defineAsyncComponent's callback needs to return a Promise of the imported component definition, but it currently returns nothing:
const Lazy = defineAsyncComponent(() => {
import('../../components/frontend/Lazy.vue')
// ❌ returns nothing
})
You could either add the return statement in the callback:
const Lazy = defineAsyncComponent(() => {
return import('../../components/frontend/Lazy.vue')
})
...or remove the curly brackets for an implicit return:
const Lazy = defineAsyncComponent(() => import('../../components/frontend/Lazy.vue'))