v0.12.0 import mjs issue

[sxzz]

I upgrade @vue/composition-api from 1.1.5 to 1.2.4, and it emit error.

Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function

I checked it babel jsx plugin imported @vue/composition-api/dist/vue-composition-api.mjs, but vue-demi imported @vue/composition-api/dist/vue-composition-api.esm.js.

So I think it should be changed to .mjs as well.

https://github.com/vuejs/composition-api/blob/a5a68e0e35321bf9d508c0a3046560112579de9b/package.json#L20

vue-demi/lib/v2/index.mjs

Line 2 in 077cdb8

import VueCompositionAPI from '@vue/composition-api/dist/vue-composition-api.esm.js'

[sxzz]

solution: #105 (comment)

[Shinigami92]

Current workaround for me is

// package.json
// ...
  "resolutions": {
    "vue-demi": "0.11.4"
  }
// ...

[antfu]

You better set the alias for future-proofing:

{
  alias: {
    '@vue/composition-api': '@vue/composition-api/dist/vue-composition-api.mjs',
    '@vue/composition-api/dist/vue-composition-api.esm.js': '@vue/composition-api/dist/vue-composition-api.mjs'
  }
}

[Shinigami92]

Getting this error:

[vite:load-fallback] Could not load @vue/composition-api/dist/vue-composition-api.mjs/dist/vue-composition-api.mjs (imported by node_modules/vue-demi/lib/index.mjs): ENOENT: no such file or directory, open '@vue/composition-api/dist/vue-composition-api.mjs/dist/vue-composition-api.mjs'
error during build:
Error: Could not load @vue/composition-api/dist/vue-composition-api.mjs/dist/vue-composition-api.mjs (imported by node_modules/vue-demi/lib/index.mjs): ENOENT: no such file or directory, open '@vue/composition-api/dist/vue-composition-api.mjs/dist/vue-composition-api.mjs'

My vite.config.ts is:

import { resolve } from 'path';
import { defineConfig } from 'vite';
import tsNameof from 'vite-plugin-ts-nameof';
import { createVuePlugin } from 'vite-plugin-vue2';

// https://vitejs.dev/config
export default defineConfig({
  plugins: [
    tsNameof(),
    createVuePlugin()
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),

      // https://github.com/vueuse/vue-demi/issues/106#issuecomment-953155139
      '@vue/composition-api': '@vue/composition-api/dist/vue-composition-api.mjs',
      '@vue/composition-api/dist/vue-composition-api.esm.js': '@vue/composition-api/dist/vue-composition-api.mjs'
    }
  },
  build: {
    assetsDir: 'static',
    target: ['chrome63'],
    chunkSizeWarningLimit: 2048
  },
  server: {
    port: 18080
  }
});

Using resolve for these aliases also doesn't work and result in same error

[sxzz]

@vue/composition-api/dist/vue-composition-api.mjs
transformed to
@vue/composition-api/dist/vue-composition-api.mjs/dist/vue-composition-api.mjs

Because of '@vue/composition-api': '@vue/composition-api/dist/vue-composition-api.mjs'.

Try to use regexp

alias: [
  { find: /^@vue\/composition-api$/, replacement: '@vue/composition-api/dist/vue-composition-api.mjs' },
]

[Shinigami92]

@sxzz Thank you, that works:

  resolve: {
    alias: [
      { find: '@', replacement: resolve(__dirname, './src') },
      { find: /^@vue\/composition-api$/, replacement: '@vue/composition-api/dist/vue-composition-api.mjs' }
    ]
  }

[sxzz]

Fixed in #105

[antfu]

Now in @vue/composition-api v1.3.0, it should export .mjs by default. If everything works correctly you might no longer need the alias. See https://github.com/vuejs/composition-api/releases/tag/v1.3.0 for more details.

[Shinigami92]

Can confirm it works 🎉

[Demivan]

@antfu, I think it would be a good idea to update @vue/composition-api peer-dependency range to be "^1.3.0". This way you should get a warning when using a non mjs-ready @vue/composition-api version.