How to create Vite based Vue component library consumable via .mjs files?

[jtuchel]

I created a Vite based Vue library. This library should distribute a single component inside a .mjs file.

---

Library setup

I basically created a new Vue app via npm create vue, moved every dependency to dev dependencies and added this to the package.json

  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "import": "./dist/computedRenderer.mjs",
      "require": "./dist/computedRenderer.umd.cjs"
    }
  },

After that I added the following to my vite.config.ts file

  build: {
    lib: {
      name: "mylib",
      fileName: "computedRenderer",
      entry: resolve(__dirname, './src/myComp/index.ts'), // index file exporting my component
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  }

Building the project should generate you a computedRenderer.mjs in the dist directory ( as expected ).

---

File server for testing purposes

I created a small Node server serving the static .mjs file

import cors from "cors";
import express from "express";

const port = 3_000;

express()
    .use(express.json())
    .use(cors())
    .use(express.static('./public')) // directory contains the generated .mjs file
    .listen(port, () => {
        console.log(`Listening on port ${port}`);
    });

When running the server and calling

http://localhost:3000/computedRenderer.mjs

you should get the file content

---

How I consume the component

In my main project I try to import the component dynamically during runtime like so

<script setup lang="ts">
import { onMounted } from "vue";

onMounted(async () => {
  const source = 'http://localhost:3000/computedRenderer.mjs'; // example url
  const { ComputedRenderer } = await import(source);

  // ...
});
</script>

Unfortunately I get the following warning

The above dynamic import cannot be analyzed by Vite. See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

and error

Uncaught (in promise) TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

Is my library setup wrong? Or how can I consume the component via url?

Please let me know if you need more information

[worldluoji]

I faced the same problem. Do you have a solution to solve this problem?

[Sazzels]

same here, need help solving this

[LinusBorg]

This is tricky.

Vite it telling you that it can't alayze this remote file. Usually, in apps, dynamic imports reference local files that Vite can analyze and, famongst other things, resolve package imports. It would for example replace import ... from 'vue' with something like import ... from '@fs/node_modules/vue/dist/vue.esm-bundler.js', which then can be resolved as a real file on your disk.

As it can't analyze the remote library file, that remote library file contains a raw import .... from 'vue' statement, which your browser can't deal with. Where should the browser find vue, after all? it's not a path/Url to a specific file!

So you would need an import map in your index.html, telling the browser where to find 'vue'. But then, your app also needs to externalize 'vue' so your app code does not use the local vue package from your file system, it should use the same one from the import map.