Use both vue-composable and any cjs module (such as vuedraggable) in vite, resulting in an error!

[shufangyi]

In [vue-composable.esm-bundler.js]

if change

import {...} from '@vue/runtime-core';

to

import {...} from 'vue';

then

yarn dev --force

this error will be solved!

example 👉 link

[pikax]

Can't open your example link, maybe is private, do you mind making it public?

[shufangyi]

My mis! Now its public! @pikax

[pikax]

After talking with @patak-js this issue can be solved by adding dedup to vite.config

import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import pages from "vite-plugin-pages";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    dedupe: ["vue"], // dedup vue
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  plugins: [
    vue(),
    // options are passed on to @vue/babel-plugin-jsx
    vueJsx({}),
    pages({
      syncIndex: false,
      extensions: ["vue", "ts"],
    }),
  ],
});

Sometimes there are issues though if there are duplicated copies of the same dep, and you need to explicitely dedupe them.

https://vitejs.dev/config/#resolve-dedupe

[shufangyi]

I have tried the configure dedupe: ["vue"]. Somehow it doesnot work...😢

[pikax]

That's odd, I've this working here: vite-vue-show-vue-composable-error.zip

I've deleted the node_modules and try it again, and couldn't see the error, do you mind try it again?

[shufangyi]

I even restart my comput...

the same error -> image

[shufangyi]

I downloaded the zip file you provided.

• yarn
• yarn dev --force

[jcppman]

Same here.

Tried the example @pikax provided and it can render the page correctly but once I drag any item this throws:

vue.runtime.esm-bundler.js:1 Uncaught ReferenceError: nextTick is not defined
    at Object.nextTick (vue.runtime.esm-bundler.js:1)
    at Proxy._emit (vuedraggable.js:14)
    at Sortable.<anonymous> (vuedraggable.js:29)
    at dispatchEvent (sortable.esm.js:916)
    at _dispatchEvent (sortable.esm.js:961)
    at Sortable._dragStarted (sortable.esm.js:1570)

My env:

• node v15.5.0
• yarn v1.22.10
• chrome 89.0.4389.128 (Official Build) (x86_64)

[CalebKester]

Just putting this here as a followup. I was running into the issue as I think it was similar to what's being reported here. Or maybe it's related to the dedupe vite fix. Anyways, I was trying to get vue-composable to work in yarn workspace (monorepo) and was running into the error. Eventually I fixed it by installing @next which looks like it's 1.0.0-alpha.37 I'm not sure why that worked and beta.37 doesn't. I'm more then happy to provide any sort of testing or lookup into this. I just thought it was strange that upgrading to that version seemed to fix my issue.

../node_modules/vue-composable/dist/vue-composable.esm-bundler.js:1:120: error: Could not resolve "@vue/composition-api" (mark it as external to exclude it from the bundle)```