search

sagalbot / vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
https://vue-select.org
MIT License
4.62k stars 1.33k forks source link

"vue-select": "^4.0.0-beta.3" comp.mixins.forEach is not a function #1603

Open soongsta opened 2 years ago

soongsta commented 2 years ago

Please respect maintainers time by filling in these sections. Your issue will likely be closed without this information.

Describe the bug running a page with vue-select displays an error in the console

(node:6) UnhandledPromiseRejectionWarning: TypeError: comp.mixins.forEach is not a function
    at normalizePropsOptions (/home/projects/node-ivj5pv/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3341:25)
    at createComponentInstance (/home/projects/node-ivj5pv/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6851:23)
    at renderComponentVNode (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:197:22)
    at Module.ssrRenderComponent (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:629:12)
    at _sfc_ssrRender (file:///home/projects/node-ivj5pv/.nuxt/dist/server/server.mjs:2309:31)
    at renderComponentSubTree (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:269:13)
    at renderComponentVNode (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:214:16)
    at renderVNode (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:310:22)
    at renderVNode (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:316:17)
    at renderComponentSubTree (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:275:13)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:6) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:6) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:6) UnhandledPromiseRejectionWarning: TypeError: comp.mixins.forEach is not a function
    at normalizePropsOptions (/home/projects/node-ivj5pv/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3341:25)
    at createComponentInstance (/home/projects/node-ivj5pv/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6851:23)
    at renderComponentVNode (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:197:22)
    at Module.ssrRenderComponent (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:629:12)
    at _sfc_ssrRender (file:///home/projects/node-ivj5pv/.nuxt/dist/server/server.mjs:2309:31)
    at renderComponentSubTree (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:269:13)
    at renderComponentVNode (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:214:16)
    at renderVNode (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:310:22)
    at renderVNode (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:316:17)
    at renderComponentSubTree (/home/projects/node-ivj5pv/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:275:13)
(node:6) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)

Reproduction Link https://stackblitz.com/edit/node-ivj5pv?file=package-lock.json

Steps To Reproduce

  1. create an empty nodejs project
  2. npm i nuxt3@latest vue-select@beta
  3. create index.vue to display vue-select

Expected behavior No error and vue-select to work

sagalbot commented 2 years ago

I think the root has something to do with the way mixins are being imported and exported from index.js.

import mixins from './mixins/index

This should be fixed with #1594

micksi commented 2 years ago

A quick temp fix for this issue can be to explicitly import VueSelect instead of using the default import.

in case of the example the code would be

import { VueSelect as vSelect } from 'vue-select';
soongsta commented 2 years ago

That worked šŸ‘