Vue version

3.2.41

Link to minimal reproduction

https://github.com/cowith/td6578

Steps to reproduce

git clone https://github.com/cowith/td6578

cd td6578 yarn install yarn deploy yarn dev

switch to /about

====================================================================== 1、create a component, and use

<template>
  <div class="vite-alert">
    <div class="vite-alert__content">
      <!-- using slot -->
      <slot></slot>
      <h1 class="red">{{ message }} - {{ email }}</h1>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    email: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      message: 'Hello World',
    };
  },
};
</script>

<style scoped>
.red {
  color: red;
}
</style>

====================================================================== 2、build component as lib mode

import { fileURLToPath, URL } from 'node:url';
import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      compilerOptions: {},
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  build: {
    outDir: 'lib',
    lib: {
      entry: resolve(__dirname, './src/comp.js'),
      name: 'MyLib',
      formats: ['es', 'umd'],
      fileName: format => `my-lib.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});

====================================================================== 3、host the lib files

http-server ./lib --cors

====================================================================== 4、use in AboutView.vue（load component via ems module）

<script type="module" setup>
// import { ViteAlert } from 'http://127.0.0.1:3001/my-lib.es.js';
</script>

<template>
  <div class="about">
    <ViteAlert email="example@example.com"></ViteAlert>
  </div>
</template>

<script type="module">
import { ViteAlert } from 'http://127.0.0.1:3001/my-lib.es.js';
// import ViteAlert from '../packages/alert/index.vue';
export default {
  components: {
    ViteAlert,
  },
};
</script>

<style scoped>
.red {
  color: red;
}
</style>

according to,

• https://github.com/vuejs/core/issues/4344
• https://stackoverflow.com/questions/72036673/typeerror-cannot-read-properties-of-null-reading-isce-custom-component-li/72095753#72095753
• https://stackoverflow.com/questions/71063992/when-importing-self-made-vue-3-library-into-vue-3-project-uncaught-typeerror

i try all of those solution and failed

====================================================================== vite.config.js setting

import { fileURLToPath, URL } from 'node:url';
import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      compilerOptions: {},
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      // ====================for isCE error====================
      vue: resolve(__dirname, './node_modules/vue'),
    },
    dedupe: ['vue'],
    // ====================for isCE error====================
  },
  build: {
    outDir: 'lib',
    lib: {
      entry: resolve(__dirname, './src/comp.js'),
      name: 'MyLib',
      formats: ['es', 'umd'],
      fileName: format => `my-lib.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],

      // ====================for isCE error====================
      resolve: {
        alias: {
          vue: resolve(__dirname, './node_modules/vue'),
        },
        dedupe: ['vue'],
      },
      // ====================for isCE error====================

      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});

What is expected?

hope work like normal component

What is actually happening?

System Info

No response

Any additional comments?

No response

I think your remote lib.es.js imports another vue from unpkg.com, which results in conflict.

I think your remote lib.es.js imports another vue from unpkg.com, which results in conflict.

i changed importmap to vue@3.2.41

<script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.2.41/dist/vue.esm-browser.js"
        }
      }
    </script>

and lock node_module vue version to vue@3.2.41

{
  "name": "vite-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "vite build && http-server ./lib --cors --port 3001"
  },
  "dependencies": {
    "http-server": "^14.1.1",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.2",
    "vite": "^3.1.8",
    "vue": "3.2.41"
  }
}

still not working

Version-independent, two vue were imported, one local and one remote, and this error was thrown by the second remote vue.

Version-independent, two vue were imported, one local and one remote, and this error was thrown by the second remote vue.

fixed

How was it fixed? Currently having this issue

I have the same issue, has anyone been able to figure out what the problem really is?

It has been explained above. Two different copies of Vue being used in the same app. the app uses one copy, and the remote imported component uses another.

There are various ways how one can end up in this situation. in the above version, it was because of the lib using a CDN version of vue while the app did bundle its own copy of Vue.

If you need help with your specific situation, ask the community for help in this repository's "discussions" tab or on our discord (chat.vuejs.org)