Vue 3 support - Githubissues

koljada commented 4 years ago

Is your feature request related to a problem? Please describe. It would be great to have a working version for Vue 3.

Describe the solution you'd like New version with Vue 3 support.

Describe alternatives you've considered

Additional context At the moment I can't even install the lib:

vue-select@3.10.7" has incorrect peer dependency "vue@2.x"

Edited by @sagalbot: Vue 3 support is available on the `beta` release channel.

Please see #1597 as the source of truth for the v4 / Vue 3 compatible release. Thanks! - @sagalbot

npm install vue-select@beta

yarn add vue-select@beta

wolfjagger commented 3 years ago

I have a repo that depends on vue-select that I've been upgrading to vue 3. I forked vue-select (https://github.com/wolfjagger/vue-select) and upgraded as best I could.

Seems to install correctly, and unit tests now pass without too much modification. I don't know the library top-to-bottom, so I didn't comprehensively test manually. I didn't upgrade or remove more packages than necessary, so yarn audit's not great. I did need to install typescript; I think maybe @vue/test-utils needed it?

Unfortunately, there is a problem when using this as a dependency. When I import it in another package and try to mount it, it refuses and throws a bunch of warnings, starting with:

[Vue warn]: Invalid VNode type: Symbol() (symbol) 
  at <VueSelect ref="selectEl" class="select unfocused" modelValue=""  ... >
  ...

I don't know why this is; suspect a vue 3 bug. I see a couple of similar error messages on searching, and this seems very relevant: https://forum.vuejs.org/t/vue-3-invalid-vnode-symbol-fragment-when-using-an-external-component-with-a-slot/105448. May be a bug with slots, which the library relies on a lot.

Anyway, try it out if you want! And if you know or figure out the "Symbol" bug, please reply. :)

wolfjagger commented 3 years ago

Took me way too long, but found the bug to be from bundling vue into the library. Vue was bundled in, so when the slot was rendered, it used a Symbol(Fragment). Symbols are unique by default, so the vue that was bundled in and the vue that was used in a consuming library created two different Symbols, and they were compared when trying to render. Since they did not show as equal, it refused to render the Fragment properly and emitted this error.

Fix is just adding externals: { vue: 'vue' } to webpack. Bonus is that the bundle size is smaller.

josh7weaver commented 3 years ago

Is there any roadmap on upgrading to Vue 3 compatibility? I see @wolfjagger has a PR with at least a good start on it. Is the library author open to PR's on this? I'd be interested in helping out as I can.

Vue 3 is supposed to come off the @next branch by the end of the month, so we should probably get this done sooner than later. That said, December can be a busy month with the holidays so I just want to acknowledge that also.

Any indication from the author or someone with merge powers would be appreciated! Love this library.

sagalbot commented 3 years ago

@josh7weaver in typical fashion, I've been slow to action on the Vue 3 updates mostly because it's a really good opportunity for a bit of ground up rewriting that needs to happen. If I'm going to update for Vue 3, I'd prefer to group as many breaking changes that need to occur as possible into that release. The current focus system has a lot of issues that affect UX and accessibility, and I'd also like to get the component to a place where it manages no internal state – just props and events. This would lower the footprint of the component, while reducing the amount of bugs that props like reduce bring to the table.

That said, I don't want the component to fall behind when Vue 3 becomes the norm.

I started freelancing full time back in September, so time has been tight. I have a week at the end of the December that I'm not booked on any projects, and as much as I'll be trying to stay off the keyboard then, I'll probably end up taking a look at this.

sagalbot commented 3 years ago

I've consolidated the existing PRs into #1344 – you can track progress there. I'll release under the vue-select@next tag until Vue drops next. Hoping to squeeze in all the breaking changes this week while I'm on vacation. Huge thanks to @parabolt & @wolfjagger for really getting the ball rolling.

Christopher-Hayes commented 3 years ago

I'm on Vue3 and have NPM pulling vue-select in from the vue-3-compat branch, and there's a ? in the middle of the line below (left over TypeScript?). My compiler refused to build because of it. I thought it was telling me there was something major screwed up with the build process. After screwing around for a couple of hours, I tried just removing the ? and everything is running smoothly now.

I didn't have this issue with the latest Vue2 NPM module, and the line below was committed 9 months ago. Weird.

https://github.com/sagalbot/vue-select/blob/3b3ab38c8ee2b0e489a6b03cb484193a504d78ff/src/mixins/pointerScroll.js#L26

UPDATE: And it looks like that was needed. As mentioned above, this seems to be a random bit of Typescript in a .js script. Switched out that line for const optionEl = this.$refs.dropdownMenu ? this.$refs.dropdownMenu.children[this.typeAheadPointer] : false; and everything seems to be working again.

sagalbot commented 3 years ago

@Christopher-Hayes that's actually just plain old JavaScript - the new optional chaining operator . It allows you to access deeply nested object properties safely, returning null if it doesn't exist. I think you still need to specify explicit support with Babel https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

Christopher-Hayes commented 3 years ago

@sagalbot oh, no way! I use it all the time in Typescript, I had no idea it was coming to JavaScript. That's awesome, thanks for the explanation.

terax6669 commented 3 years ago

I'm on Vue3 and have NPM pulling vue-select in from the vue-3-compat branch, and there's a ? in the middle of the line below (left over TypeScript?). My compiler refused to build because of it. I thought it was telling me there was something major screwed up with the build process. After screwing around for a couple of hours, I tried just removing the ? and everything is running smoothly now.

I have the same problem, installing @babel/plugin-proposal-optional-chaining and adding to babel.config.js did not help

module.exports = {
  plugins: [
    '@babel/plugin-proposal-optional-chaining',
  ],
}

Error seems to originate from Webpack validating the final output after all loaders:

 ERROR  Failed to compile with 1 error                                                                                                           17:50:03

 error  in ./node_modules/vue-select/src/mixins/pointerScroll.js

Module parse failed: Unexpected token (26:32)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     maybeAdjustScroll() {
|       const optionEl =
>         this.$refs.dropdownMenu?.children[this.typeAheadPointer] || false;
|
|       if (optionEl) {

 @ ./node_modules/vue-select/src/mixins/index.js 3:0-43 5:32-45
 @ ./node_modules/vue-select/src/index.js
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://***:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

terax6669 commented 3 years ago

https://github.com/webpack/webpack/issues/10227

pounard commented 3 years ago

Hello, I "almost" made it work, I guess, I got that error:

Uncaught TypeError: this.$on is not a function
    created vue-select.js:1
    callWithErrorHandling runtime-core.esm-bundler.js:154
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:163
    callSyncHook runtime-core.esm-bundler.js:5898
    applyOptions runtime-core.esm-bundler.js:5829
    finishComponentSetup runtime-core.esm-bundler.js:6507
    setupStatefulComponent runtime-core.esm-bundler.js:6440
    setupComponent runtime-core.esm-bundler.js:6380
    mountComponent runtime-core.esm-bundler.js:4118
    processComponent runtime-core.esm-bundler.js:4094
    patch runtime-core.esm-bundler.js:3712
    render runtime-core.esm-bundler.js:4794
    mount runtime-core.esm-bundler.js:3019
    mount runtime-dom.esm-bundler.js:1220
    initAutocomplete vue-select.ts:55
    ts vue-select.ts:62

I'm using those versions altogether (writing TypeScript here, not JS):

vue-select ^3.11.2:
@vue/* 3.0.5
@types/vue-select ^2.5.1

My code is (less the init code, that doesn't matter here):

import { createApp } from 'vue'
import vSelect from 'vue-select';

function initAutocomplete(element: HTMLSelectElement): void {
    // Prepare a div below our select and hide the existing select
    const placeholder = document.createElement("div");

    const props = {
        value: null as any,
        options: [] as any[],
        placeholder: element.getAttribute("placeholder"),
        // ... a few other options
    };

    const defaults = [];
    for (let opt of (element.options as unknown as HTMLOptionElement[])) {
        const value = {label: opt.label, id: opt.value};
        props.options.push(value);
        if (opt.selected) {
            defaults.push(value);
        }
    }

    props.value = defaults;

    createApp(vSelect, { props: props }).mount(placeholder);
}

Following many links I ended up on: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md which seem to explain that this.$on was removed in Vue3.

Everything explodes here when reaching: https://github.com/sagalbot/vue-select/blob/master/src/components/Select.vue#L636

Is there a possible workaround (i.e. avoiding calling this method) by configuration ? Did I wrote something wrong in my code ? Should I wait for a Vue3 compatible version ? Should I fork if I need it quickly ?

Christopher-Hayes commented 3 years ago

@pounard I was getting the same error. Vue-select 3.11.2 doesn't have any Vue3 compatibility updates, right now everything is on the vue-3-compat branch and there's no NPM release for those changes yet, so if you want Vue3 compatibility you'll have to tell NPM to pull in that specific branch directly from GitHub. I forget the exact syntax of the npm install I used, but this is what I have in my package.json:

    "vue-select": "https://github.com/sagalbot/vue-select/tarball/feat/vue-3-compat"

So, if you run npm rm vue-select, add the line above to your dependencies in your package.json, and then run npm install, it should install this branch. Once you reach that point, you'll may run into the error I mentioned a few replies up, I don't have the special Babel configuration for Optional Chaining, so maybe someone who has that working can help you with that. But, if you just want to get it working quick/dirty, change line 25 of /your_project_root/node_modules/vue-select/src/mixins/pointerScroll.js to:

const optionEl = this.$refs.dropdownMenu ? this.$refs.dropdownMenu.children[this.typeAheadPointer] : false

terax6669 commented 3 years ago

Every package maintainer should be putting this into their readmes right now:

For Vue 3 (WIP):

npm install git+https://github.com/sagalbot/vue-select.git#feat/vue-3-compat

Suggestion to vue-select maintainers: release this as next on npm so people can just npm i vue-select@next

pounard commented 3 years ago

Thanks @Christopher-Hayes and @terax6669 for answering, I'm trying to find stable components and I'm currently testing @vueform/multiselect which also seem to implement what I need. I'm still in early dev phase of the project I'm working on, so I might re-evaluate this component which seems nice as soon as a @next release exists ! Thanks for everything.

rrrrando commented 3 years ago

Hey!

Got a beginner question here. When i install from the vue-3-compat branch and try to import like this:

import vSelect from 'vue-select';

webpack gives me this error message:

Module not found: Error: Can't resolve 'vue-select' in 'path/to/app.js'

What am i doing wrong?

Christopher-Hayes commented 3 years ago

Hey!

Got a beginner question here. When i install from the vue-3-compat branch and try to import like this:
import vSelect from 'vue-select';
webpack gives me this error message:
Module not found: Error: Can't resolve 'vue-select' in 'path/to/app.js'
What am i doing wrong?

I had the same issue, I used a workaround, may not be the best way to do it, but it works for me. Use the import below instead of the usual 'vue-select' (but change the pathing to match your directory structure, I just threw it into my main.ts so I didn't have to think about it importing everywhere)

import vSelect from './../node_modules/vue-select/src/index.js';

mhmousavi commented 3 years ago

@pounard I was getting the same error. Vue-select 3.11.2 doesn't have any Vue3 compatibility updates, right now everything is on the vue-3-compat branch and there's no NPM release for those changes yet, so if you want Vue3 compatibility you'll have to tell NPM to pull in that specific branch directly from GitHub. I forget the exact syntax of the npm install I used, but this is what I have in my package.json:

"vue-select": "https://github.com/sagalbot/vue-select/tarball/feat/vue-3-compat"

So, if you run npm rm vue-select, add the line above to your dependencies in your package.json, and then run npm install, it should install this branch. Once you reach that point, you'll may run into the error I mentioned a few replies up, I don't have the special Babel configuration for Optional Chaining, so maybe someone who has that working can help you with that. But, if you just want to get it working quick/dirty, change line 25 of /your_project_root/node_modules/vue-select/src/mixins/pointerScroll.js to:

const optionEl = this.$refs.dropdownMenu ? this.$refs.dropdownMenu.children[this.typeAheadPointer] : false Originally posted by @Christopher-Hayes in #1251 (comment)

Hi I do this last line in my project and that error gone. but now my v-select doesn't show anything at all on project! but I can see the component in the inspect dev tool!

sjblasko commented 3 years ago

I've installed the vue-3-compat and have been getting the optional chaining issue. I have installed @babel/plugin-proposal-optional-chaining and added it to babel.config.js and those steps did not help.

module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],
    plugins: ["@babel/plugin-proposal-optional-chaining"]
};

Error:

Module parse failed: Unexpected token (26:32)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     maybeAdjustScroll() {
|       const optionEl =
>         this.$refs.dropdownMenu?.children[this.typeAheadPointer] || false;
|
|       if (optionEl) {

 @ ./node_modules/vue-select/src/mixins/index.js 3:0-43 5:32-45
 @ ./node_modules/vue-select/src/index.js
 @ ./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib??ref--12-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./Vue/App/Pages/Samples/Sample1/Sample1.vue?vue&type=script&lang=js

I can update the pointerScroll.js directly but I am starting to involve other developers and they are also having to manually update the file as well. Has anybody been able to get the Babel Optional Chaining working?

zluiten commented 3 years ago

I'm able to use this branch in my Vue 3 project :+1: . But I don't want its css. In the builds of vue-select the css is extracted to a separate file (I think?) and you have to include it manually according to the docs. But when using the source directly the styling is part of the Select.vue file. How do I configure webpack to ignore that? Can anyone point me in the right direction?

I tried to exclude /vue-select/ using the chainWebpack in vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.module.rule('scss').exclude.add(/vue-select/)
  },
}

But it seems to parse the styling section anyway and then errors out with

You may need an additional loader to handle the result of these loaders.
|
>   @import '../scss/vue-select.scss';
|

Can some webpack expert point me in the right direction? :)

pounard commented 3 years ago

Can anyone point me in the right direction?

I think that using the build the is the right solution, or you may have to patch your local copy I guess.

zluiten commented 3 years ago

But there is no build of this branch right?

pounard commented 3 years ago

You can try patching and just remove the scss code, but you'll have to maintain your patch as well if you need to upgrade ? When I have to use an unstable branch of an npm package, I usually create a src/dist/ folder in my assets, copy the source the in there, and commit it into my own repo. It's probably a bad practice, but it allows me to maintain a desync version easily with patches until the library becomes stable.

zluiten commented 3 years ago

I see. I might go for that when I can't fix it with webpack. Thanks

akshajb-getmorph commented 3 years ago

I have been working on Vue3 for a while now, is this branch stable enough to be used for what it does , or do i need to wait for the actual release. And can i have custom css for it yet ? Thank you in advance.

BSalwiczek commented 3 years ago

I've installed the vue-3-compat and have been getting the optional chaining issue. I have installed @babel/plugin-proposal-optional-chaining and added it to babel.config.js and those steps did not help.
module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],
    plugins: ["@babel/plugin-proposal-optional-chaining"]
};
Error:
Module parse failed: Unexpected token (26:32)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     maybeAdjustScroll() {
|       const optionEl =
>         this.$refs.dropdownMenu?.children[this.typeAheadPointer] || false;
|
|       if (optionEl) {

 @ ./node_modules/vue-select/src/mixins/index.js 3:0-43 5:32-45
 @ ./node_modules/vue-select/src/index.js
 @ ./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib??ref--12-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./Vue/App/Pages/Samples/Sample1/Sample1.vue?vue&type=script&lang=js
I can update the pointerScroll.js directly but I am starting to involve other developers and they are also having to manually update the file as well. Has anybody been able to get the Babel Optional Chaining working?

I've managed to solve this issue by adding webpack configuration inside vue.config.js.

module.exports = {
  ...
  configureWebpack: {
    module: {
      rules: [
        {
          test: /@?(vue-select).*\.(ts|js)x?$/,
          include: /node_modules/,
          loader: 'babel-loader'
        }
      ]
    }
  }
}

And as you mentioned the proposal-optional-chaining plugin inside babel.config.js

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": ["@babel/plugin-proposal-optional-chaining"],
}

willismonroe commented 3 years ago

I tried installing the vue-3-compat branch but when I import the component and try to serve the app I get this error:

 ERROR  Failed to compile with 1 error                                                                                                                   4:14:12 p.m.

 error  in ./node_modules/vue-select/src/components/Select.vue?vue&type=style&index=0&id=6ec6bfe5&lang=scss

Syntax Error: SassError: Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
        on line 1 of node_modules/vue-select/src/components/Select.vue
>> // style-loader: Adds some css to the DOM by adding a <style> tag

here's the relevant part of my webpack config:

module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        'vue-style-loader',
                        'css-loader',
                        'sass-loader'
                    ]
                },
            ]
        },

wolfjagger commented 3 years ago

I have a fork of vue-select that I've been using internally: "vue-select": "github:wolfjagger/vue-select#tmp/vue-3-easy-install". A couple of fixes in response to the PR comments, but mainly I added yarn build to the "prepare" script.

I don't know if it will fix all the issues discussed above (and it seems unlikely it would fix the sass issue), but I don't have to do special optional chaining or configuration. Try installation from there if you want, until this has a beta build or something.

wolfjagger commented 3 years ago

https://github.com/sagalbot/vue-select/compare/feat/vue-3-compat...wolfjagger:tmp/vue-3-easy-install

tjk commented 3 years ago

feat/vue-3-compat...wolfjagger:tmp/vue-3-easy-install

yarn 1 doesn't run the prepare npm script on package install?

Also, I get the following when trying your branch... haven't dug into what the issue might be yet though.

yarn run v1.22.5
$ cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js --progress
12% building 22/23 modules 1 active ...dist/index.js??ref--8-0!/vue-select/src/components/Select.vue?vue&type=style&index=0&lang=scssBrowserslist: caniuse-lite is outdated. Please run the following command: `yarn upgrade`
Hash: 3323d8116ff5b55bdded
Version: webpack 4.41.5
Time: 2456ms
Built at: 04/22/2021 1:39:30 PM
 4 assets
Entrypoint main = vue-select.css vue-select.js vue-select.css.map vue-select.js.map

ERROR in ./src/mixins/pointerScroll.js 26:32
Module parse failed: Unexpected token (26:32)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     maybeAdjustScroll() {
|       const optionEl =
>         this.$refs.dropdownMenu?.children[this.typeAheadPointer] || false;
|
|       if (optionEl) {
 @ ./src/mixins/index.js 3:0-43 5:32-45
 @ ./src/index.js
error Command failed with exit code 2.

EDIT: Hm I guess vue-select just expects ~a later node engine~ (something) for the optional chaining?

wolfjagger commented 3 years ago

Hey, that's fair; I use npm normally. I really don't understand how node installs from git, but the prepare script solved something or other for me in the past and helped here. Thought it might build everything with good transpiling and get around that chaining issue too; too bad. Good luck!

mihaileu commented 3 years ago

any new regarding official release ?

MechJosh0 commented 3 years ago

@sagalbot Can we please have an update on the status of this issue?

connorshea commented 3 years ago

I tried @wolfjagger's branch with Vue 3.1.0-beta.4 and it all seems to work now 🎉 (had to make quite a few changes related to v-model, though)

wolfjagger commented 3 years ago

Glad the fork could help. Yeah, v-model changed a lot.

I switched to using https://github.com/iendeavor/vue-next-select; less mature and featured, but active. So I won't be maintaining the fork, sorry!

connorshea commented 3 years ago

No worries, I appreciate the work regardless :)

connorshea commented 3 years ago

Correction: It works locally on my Mac but the yarn install fails in CI. As far as I can tell the code is exactly the same between my Mac and GitHub Actions. Same Node and Yarn versions 🤔

connorshea commented 3 years ago

I got it to install properly in CI by forking the repo, updating the package name to vue-select-connorshea, publishing it to npm under that name, and then using that package from npm instead of the one from the git repo. So... I guess that works as a solution? 🤷‍♂️ It does break TypeScript types and I'm not entirely sure how to fix that (beyond just giving it a stub with no types or copy-pasting the entire @types/vue-select definition).

connorshea commented 3 years ago

So I ran into a new issue after upgrading to Vue 3.1.0-beta.7 (and also applies to 3.1.1), which I appear to have fixed by reverting the change to this line specifically: https://github.com/sagalbot/vue-select/pull/1309/files#diff-96b70cc49a38daa29e6746780b2601d0e779a5a13f8b1afaad755aed127d8825R997

The error is Uncaught (in promise) TypeError: this.$options.props.hasOwnProperty is not a function and it's coming from the isTrackingValues function in the main Select.vue. It only seems to happen when using the select component in specific ways, dunno about that.

Anyway, I'm going to revert the change to that line and ship a new version of my forked package, I guess. Just posting this here in case anyone else runs into the same thing. Not sure if it's harmful to reverse this change, but 🤷‍♂️

mitcoding commented 3 years ago

Looks like "prepare": "npm run build" was placed in the wrong spot on package.json, it should be under scripts. This should fix the resolve and optional changing issue mentioned above as it's not currently building after install from git.

wolfjagger commented 3 years ago

Well jeez, sorry about that! I updated it. Thanks @mitcoding.

sammyaxe commented 3 years ago

Any update on this? I tried to install latest version with vue3 and getting errors.

HartleySan commented 3 years ago

So I ran into a new issue after upgrading to Vue 3.1.0-beta.7 (and also applies to 3.1.1), which I appear to have fixed by reverting the change to this line specifically: https://github.com/sagalbot/vue-select/pull/1309/files#diff-96b70cc49a38daa29e6746780b2601d0e779a5a13f8b1afaad755aed127d8825R997

The error is Uncaught (in promise) TypeError: this.$options.props.hasOwnProperty is not a function and it's coming from the isTrackingValues function in the main Select.vue. It only seems to happen when using the select component in specific ways, dunno about that.

Anyway, I'm going to revert the change to that line and ship a new version of my forked package, I guess. Just posting this here in case anyone else runs into the same thing. Not sure if it's harmful to reverse this change, but 🤷‍♂️

While it's never ideal to be changing code directly in the node_modules folder, I was able to fix this error and get it all working for me in Vue 3 by making the following change to the following file:

node_modules/vue-select/src/components/Select.vue:

isTrackingValues () {
    return typeof this.modelValue === 'undefined' || this.$options.props.hasOwnProperty('reduce');
},

↓

isTrackingValues () {
    return typeof this.modelValue === 'undefined' || this.$options.props.hasOwnProperty && this.$options.props.hasOwnProperty('reduce');
},

HartleySan commented 3 years ago

And yes, any update on Vue Select being updated to work with Vue 3 better? This library is the only thing holding me up from upgrading my project to Vue 3.

Even if we have to use npm i vue-select@next for now, that's totally fine, but I would hope that the hasOwnProperty bug fix noted above as well as the ability to do import VSelect from 'vue-select'; instead of import VSelect from '../../node_modules/vue-select/src/index.js'; will be there soon.

Thank you, and grumbling aside, love the library. By far my favorite Vue library, but sadly, that means I (along with many others I assume) am very dependent on this lib working for Vue 3.