vue-select icon indicating copy to clipboard operation
vue-select copied to clipboard

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

Open soongsta opened this issue 3 years ago • 3 comments

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

  • Vue Version: 4.0.0-beta.3
  • "nuxt3": "^3.0.0-27430570.4cfad4d"

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

soongsta avatar Feb 26 '22 04:02 soongsta

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

sagalbot avatar Mar 01 '22 16:03 sagalbot

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';

micksi avatar Mar 02 '22 13:03 micksi

That worked 👍

soongsta avatar Mar 08 '22 01:03 soongsta