Vue 3 support (prev. 'Error in initialisation with Vue3 createApp')

[jessepcc]

Initialization with instructions of doc from Vue3 as follow

import { createApp } from "vue";
import App from "./App.vue";

import VueSocketIOExt from "vue-socket.io-extended";
import io from "socket.io-client";

const app = createApp(App);

const socket = io("http://socketserver.com:1923");

app.use(VueSocketIOExt, socket);

app.mount("#app");

Getting errors in runtime
Uncaught TypeError: e is not a constructor

After some research, seems the problem is from the breaking change from Vue2 to Vue3, with the createApp api

https://nystudio107.com/blog/a-taste-of-vue-js-3-async-components-and-plugins/amp
https://alvarosaburido.dev/blog/how-to-migrate-your-library-from-vue2-to-vue3

Is there any timeline to cope with Vue3 updates?

[probil]

Hi @jessepcc and thanks for your issue.
I haven't used the library with Vue 3 yet. Neet to take a closer look at new API. Since Vue 3 has been released recently I believe it's time to work on Vue 3 compatible version of the library

[kmalski]

Hi, when can we expect support for Vue 3? I'm starting a new project and wanted to do it with the newest version of vue. Is there any option to release it at least in beta version?

[NoFr1ends]

Is this the issue to track the migration to Vue3?

[matrunchyk]

@probil do you think it's still achievable in 2020? I'm also starting a new project on Vue3 and thinking whether to go with the library or go with pure socket.io...

[probil]

@matrunchyk The migration is not hard, I'm just struggle to find enough time to deal with it. BTW in 2020 you don't have to use socket.io anymore since plain websockets are well supported in browsers. https://caniuse.com/websockets
The only reasons to use it are convenient API and support for super old browser.

I'll try to migrate it to Vue 3 later this year but can't guarantee you anything.

[matrunchyk]

@probil I know about native websockets, but socket.io is still preferable for me as it has a good abstraction layer and fallback support of long polling.

Thanks for the answer anyways!

[ReazerDev]

I've made a pull request containing a (definitely not production ready) migration to vue 3. #499

[jnt0r]

I gave this a try too. #507 My version maybe still need some work but it's working for me at the moment.

[probil]

Thanks guys will try to tackle this during the holiday

[jnt0r]

I created a PR #507 for the migration to Vue 3 but am stuck at changing the documentation for usage with Nuxt.js and Quasar Framework. If anybody knows what needs to be changed there, please provide me the changes so we all can get vue3 support :)

[probil]

I've just published alpha version of the library with Vue 3 support in alpha channel.

@jnt0r could you check how it work for you? Unfortunately my project at work doesn't use socket.io at all

For some reason library has grown considerably after migration:

Now: 12kb
Before: 7kb

In original MR it was even larger, 25kb due to part of the vue compiled into the library. So I made it external but there is something more. I suspect vue-class-component 🤔

BTW Nuxt.js and Quasar are not supporting vue 3 just yet so we shouldn't worry about them

[jnt0r]

@probil Nice 👍🏽
I just tested it with my curreent project and it works for me. Did not test all features but basic features work.

I don't know why it's getting that big ... I haven't read into how you build the plugin. Maybe I catch something up than I will let you know.

[jnt0r]

@probil A quick investigation into rollup.build.sh showed smaller plugin size when adding vue-class-component to external and also to globals. Got size back down to 7 KB. Also tested it with my current project and got no errors so should basically work.

[probil]

Thanks for investigation @jnt0r
Since vue-class-component is supposed to be used with some sort of transpiler I don't think it worth adding to globals. Will update alpha with vue-class-component excluded soon. I even thought about making it a separate thing. Something like vue-socket.io-extended/decorators, e.g.:

<!-- App.vue -->
<script>
import { Options, Vue } from 'vue-class-component';
import Socket from 'vue-socket.io-extended/decorator'

@Options({})
export default class App extends Vue {
  @Socket() // --> listens to the event by method name, e.g. `connect`
  connect () {
    console.log('connection established');
  }

  @Socket('tweet')  // --> listens to the event with given name, e.g. `tweet`
  onTweet (tweetInfo) {
    // do something with `tweetInfo`
  }
}
</script>

But it would require to change the build process a bit 🤔

[probil]

It turned out the build process doesn't have to.be changed that much.

Using of exports key in package.json can do the trick
https://webpack.js.org/guides/package-exports/
https://github.com/jkrems/proposal-pkg-exports/

It would also allow to remove an indecent solution (with 2 entrypoints) introduced in the v4.

[probil]

Just published a new version with the decorator exported in a separate entry point. Library size went back to 6k (minified)

Installation is still with npm i vue-socket.io-extended@alpha

Need to hear some feedback to make sure it works for both common usage and decorator usage. Some set of tests would probably be better but it would take more time.

[Nitwel]

Just tried this using Vue3 + Ts + CompositionApi and everything seems to be working! ❤️
Thank you very much!

[ReazerDev]

I'll update my project either later today or this week aswell to test this👍

[DblK]

I do not have the Uncaught TypeError: e is not a constructor error with the alpha version of the package but can not make it work.
@Nitwel any full example to share?

The issue I have now is Uncaught TypeError: Object(...) is not a function and it point out to connect() in this part of code:

@Socket() // --> listens to the event by method name, e.g. `connect`
connect(): void {
  console.log('connection established', this);
}

In the terminal I have the following error too export 'Socket' was not found in 'vue-socket.io-extended'.

[probil]

@DblK There are some breaking changes in alpha.

Try to import decorator from a different path please:

- import { Socket } from 'vue-socket.io-extended'
+ import Socket from 'vue-socket.io-extended/decorator'

Also, make sure you are using socket.io-client and socket.io v2 as v3 is not yet supported

[DblK]

With this import I have got the following error: Cannot find module 'vue-socket.io-extended/decorator' or its corresponding type declarations.
Did I mess up somewhere ?

[probil]

@DblK No. I haven't tested importing this new path in TS. Will take a look. Thanks for reporting

[MrBrax]

Just started using this. Typescript seems to think that the sockets property in components exists on the root, so when you access this in a socket method/callback, it type hints to this: App<any> instead of the CreateComponentPublicInstance, making the entire project fail on compile.

[probil]

@MrBrax I'm not really good at TS so if you could provide the MR (to alpha branch) fixing the issue it would be really nice of you :)

[MrBrax]

MR? I actually don't know how to fix it myself, I've never written type/definition files :(

[probil]

Ah, ok. Maybe someone else can help here.

[MrBrax]

It probably stems from this: https://github.com/probil/vue-socket.io-extended/blob/alpha/types/vue.d.ts#L9

Seems to be changed from the stable version.

[MrBrax]

type DefaultSocketHandlers = {
  [key: string]: (...args: any[]) => any
};

This seems to have fixed it on the editor side, but i can't really test it out in my docker container. No idea if it breaks anything either.

edit:

yep that fixed it

[jnt0r]

@probil I just investigated #528 and came to this issue where you stated the breaking change for the import of the Socket Decorator. I tried it out and it didn't work as it said TS2307: Cannot find module 'vue-socket.io-extended/decorator' or its corresponding type declarations.
I found that the typescript definition exports the Socket still in the index.d.ts. But the decorator is not exported in the index file. So there is a mismatch.
I will fix this in a PR

[jnt0r]

@probil can you explain why the project is built into several files with .esm, .min and not into a single index.js file. And also why you extracted the decorator into a separate file.
I try to figure out how to fix the typescript definitions for the decorator. Struggling a bit, that's why I ask these questions :)

[probil]

@jnt0r

why the project is built into several files with .esm, .min and not into a single index.js file.

Mostly for compatibility purpose. ESM is not fully supported by all the browsers but it's prefered format for modern bundlers (Webpack, Rollup, etc) especially for tree-sharking.
.min files on the other hand can be used directly in any browser without bundler involved. That's a simple way to try out the library or use in systems like Wordpress where bundlers are not available by default

As far as I know the format is not supposed to impact type definition, so don't worry about this.

And also why you extracted the decorator into a separate file.

Because having everything in one file make is harder to work with. Take a look at the issue here #464 . The point is that the extra dependency of vue-class-component is needed even though, decorator is not used in the codebase. So I decided to go with exports key instead, allowing to import decorator explicitly if needed

import Socket from 'vue-socket.io-extended/decorator'

while having core available to without decorator (so it's not imported to the codebase by default)

[probil]

The problem with decorator might be that we need to make sure TS can follow redirects specified in exports + provide type declaration for decorator.
While we could write decorator in TS there is an option to use babel plugin for decorators support without TS.

I'm also pondering the idea of full TS rewrite in order to prevent issue with TS declarations

[jnt0r]

Okay, I understand that. Had some hard time figuring out this types thing with the submodules. But got it working => PR is opened. So no need to use Babel or anything else for that.

Hopefully, I can assist at full TS rewrite :) Just ping me if you decided to start.

[probil]

@jnt0r Merged you PR. Thanks! 💪 Could you also rebase your PR regarding useSocket()? there are some minor.
I'd love to have useSocket() in the v5

[jnt0r]

@probil I will take a look at it. But first, need to understand what it should do... to be able to test it out :)

[probil]

Oh sorry @jnt0r I messed you up with another guy (@e-tobi) who has created PR with the idea of useSocket(). You guys have almost the same avatar :)

[probil]

I've spend some time today to create an example of alpha working with Vue 3 (Options API):
https://codesandbox.io/s/vue-socket-io-extended-v5-vue-3-options-api-skhrn

Usage of decorator syntax is coming soon, should help to fix potential issues, e.g. #528

[soufianeYM-eng]

Hello, I hope you're doing well please I have a problem in my project when I try to send an event to execute an action in my store, the action not executed I don't know where is the problem

this.$store.dispatch('emitSocketEvent',20)

this is my action that sends an event to execute another action

const actions = { emitSocketEvent(context, notif){ $socket.emit('chat_message', notif) } }

and the rest is the file who contains our action chat_message

const mutations = { SOCKET_CHAT_MESSAGE(state,notif){ console.log('HEY'); state.notifications.push(notif) } }

const actions = { socket_chatMessage({ dispatch, commit }, notification){ console.log('NOTIFICATION_ADDED'); commit('SOCKET_CHAT_MESSAGE',notification) } }

and thank you so much

[thexeos]

There is an issue with the dependency - @types/socket.io-client. It has been deprecated in favor of built-in typing inside socket.io-client package. The current (latest) version of @types/socket.io-client has several bugs that cause TS compilation errors.

[ManiMatter]

hi @probil

I'm trying to get vue-socket.io-extended to get to work with typescript and the following packages.
I tried t follow your examples on codesandbox.io but am always hitting a wall.

    "socket.io-client": "2.4.0",
    "vue": "^3.3.4",
    "vue-socket.io-extended": "5.0.0-alpha.5"

main.ts

import App from './App.vue';
import './style.css';
import VueSocketIOExt from "vue-socket.io-extended";
import io from "socket.io-client";
import { createApp } from 'vue';

const app = createApp(App);
app.use(VueSocketIOExt, io('http://192.168.1.6:8443', {path: "/absproxy/3000/socket.io/"}));
app.mount("#app");

which gives me this error:

vue-socket__io-extended.js?v=c46d257e:181 Uncaught TypeError: e3 is not a constructor
    at vue-socket__io-extended.js?v=c46d257e:181:14
    at Object.install (vue-socket__io-extended.js?v=c46d257e:195:4)
    at Object.use (vue.js?v=c46d257e:5139:18)
    at main.ts:17:5

I've also tried to add this linem as suggested in the earlier posts

import Socket from 'vue-socket.io-extended/decorator'

but then I am getting this error:
[plugin:vite:import-analysis] Failed to resolve import "vue-socket.io-extended/decorator" from "src/components/HelloWorld.vue". Does the file exist?

Any ideas?