[bug] User profile page is not shown - JavaScript error in console for "ConnectedAccount.vue"
trifisch opened this issue · 1 comments
trifisch commented
Describe the bug
After installing Socialstream v4.4.5, I get the following JavaScript error if I navigate the profile page of a user:
"Uncaught (in promise) ReferenceError: computed is not defined" in file "resources/js/Components/ConnectedAccount.vue".
To Reproduce
Steps to reproduce the behavior:
- Install Socialstream with Google provider.
- After login with Google, navigate to user profile.
- See error
Expected behavior
Profile page should be shown with connected account "Google".
Environment context
- Socialstream version: 4.4.5
- Jetstream stack: Inertia
- Laravel version: 10.28.0
- PHP version: 8.2.10
Analysis
The file "ConnectedAccount.vue" seems to have some errors:
- "computed" is not imported from "vue"
- The providerName seems to be computed from a wrong variable "name".
- The provider property is referenced without "props." object
Potential solution
Changing the <script setup> section to the following worked for me. If desired, I may also create a pull request.
<script setup>
import { computed } from 'vue';
import BitbucketIcon from '@/Components/SocialstreamIcons/BitbucketIcon.vue';
import FacebookIcon from '@/Components/SocialstreamIcons/FacebookIcon.vue';
import GithubIcon from '@/Components/SocialstreamIcons/GithubIcon.vue';
import GitLabIcon from '@/Components/SocialstreamIcons/GitLabIcon.vue';
import GoogleIcon from '@/Components/SocialstreamIcons/GoogleIcon.vue';
import LinkedInIcon from '@/Components/SocialstreamIcons/LinkedInIcon.vue';
import SlackIcon from '@/Components/SocialstreamIcons/SlackIcon.vue';
import TwitterIcon from '@/Components/SocialstreamIcons/TwitterIcon.vue';
const props = defineProps({
provider: String,
createdAt: {
type: String,
default: null,
}
});
const providerName = computed(() => {
switch(props.provider) {
case 'twitter':
case 'twitter-oauth-2':
return 'Twitter'
case 'linkedin':
case 'linkedin-openid':
return 'LinkedIn'
default:
return props.provider.charAt(0).toUpperCase() + props.provider.slice(1);
};
});
</script>
trifisch commented
Thanks!