vite+vue3打包umd库报错Cannot read properties of undefined (reading 'openBlock')

Question

通过vite+vue3打包umd库，通过cdn引入发现报错
Cannot read properties of undefined (reading 'openBlock')
发现是打包之后global拿不到Vue，不知如何解决？

具体操作如下：
vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: "src/core.js",
      name: "fcl",
      formats: ["es", "umd", "cjs"],
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

打包入口

import YourComponent from "./YourComponent.vue";
const components = [YourComponent];
const install = (Vue, options = {}) => {
  if (!options.store) console.log("Please provide a store!!");
  components.forEach((component) => {
    Vue.component(component.name, component);
  });
export default {
  install,
  YourComponent,
};

引入

<script src="/fcl.umd.js"></script>

使用

Answer 1

引自免费微信小程序：皆我百晓生

根据你提供的信息，问题出现在打包成umd库后，通过cdn引入时无法获取到Vue对象，导致报错"Cannot read properties of undefined (reading 'openBlock') "。

为了解决这个问题，你需要检查以下几个可能的原因和解决方案：

1. 检查外部引入的Vue版本是否与你的Vue3版本匹配。

由于你在打包umd库时使用了external配置并指定了vue，这意味着你希望外部引入的Vue对象和你的打包代码中使用的Vue对象是同一个版本。因此，请确保通过cdn引入的Vue版本与你的Vue3版本相匹配。

2. 在外部引入Vue之前先引入Vite的全局模块

在你的umd库入口文件（即core.js文件）的顶部部分，先引入Vite的全局模块，确保Vite的全局模块在引入Vue之前被加载。像这样：

import "/@vite/client";
import Vue from "vue";

3. 检查你的umd库的构建配置是否正确。

确保你的vite.config.js文件中的构建配置是正确的，可以按照以下方式进行调整：

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: "src/core.js",
      name: "fcl",
      formats: ["umd"],
      fileName: "fcl",
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

这里主要是将formats配置为["umd"]，并添加了fileName配置项。同时在rollupOptions中设置了external和globals，确保在打包umd库时可以正确引入Vue。

4. 确保你的组件在core.js文件中正确导出。

在你的core.js文件中，你需要确保你的组件正确导出并添加到Vue的全局组件中。可以按照以下方式调整你的core.js文件：

import YourComponent from "./YourComponent.vue";

const components = [YourComponent];

const install = (Vue, options = {}) => {
  if (!options.store) console.log("Please provide a store!!");
  
  components.forEach((component) => {
    Vue.component(component.name, component);
  });
};

export default {
  install,
  YourComponent,
};

确保在导入组件后，将组件添加到Vue的全局组件中。

5. 确保你在使用umd库时正确引入。

在你的HTML文件中，确保正确引入了打包生成的umd库，如下所示：

<script src="/path/to/fcl.umd.js"></script>

注意替换"/path/to"为你umd库文件的实际路径。

希望以上解决方案能帮助到你解决问题。如果问题仍然存在，请提供更多详细信息，以便我能够更好地帮助你。

Answer 2

Answer 3

未得到解决

Unhandled error during execution of render function 
  at <YourComponent> 
 Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <YourComponent> 
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'openBlock')
    at Proxy.p (fcl.umd.js:33:9)
    at renderComponentRoot (chunk-AA5IK4IP.js?v=fc05185a:2216:17)

Answer 4

参考通义千问和郭老师的小迷弟雅思莫了-编写提供，您可以参考如下，如果回答的不正确，及时评论区回复我，我会根据你错误描述追加回复。如果解决了您的问题，麻烦帮我点击个采纳！谢谢您的肯定！

从你的问题描述来看，你正在尝试使用 Vite 和 Vue3 打包一个 UMD 库，并且在通过 CDN 引入时遇到了 Cannot read properties of undefined (reading 'openBlock') 的错误。这个问题通常是因为 UMD 版本的库没有正确地全局暴露 Vue 实例。

查看你的配置文件和打包入口代码，你已经在 rollupOptions.output.globals 中将 vue 映射为全局变量 Vue，但是还需要确保在你的库安装函数 (install) 中使用全局的 Vue。

修改你的 install 函数如下：

import YourComponent from "./YourComponent.vue";

let globalVue = null;

if (typeof window !== 'undefined' && window.Vue) {
  globalVue = window.Vue;
} else if (typeof global !== 'undefined' && global.Vue) {
  globalVue = global.Vue; // 如果是 Node.js 环境
}

const components = [YourComponent];

const install = (providedVue, options = {}) => {
  if (!globalVue) {
    throw new Error('Could not find Vue instance for library installation.');
  }

  // 当从全局注入 Vue 时，替换此处的 Vue 变量
  const Vue = providedVue || globalVue;

  components.forEach((component) => {
    Vue.component(component.name, component);
  });

export default {
  install,
  YourComponent,
};

这样，在 UMD 模式下，当外部环境已经有一个全局的 Vue 对象时（比如通过 <script> 标签引入 Vue），我们可以在 install 函数中正确地引用它。

注意：在你提供的模板代码中，我发现了一些可能的错误，请检查并修正它们：

1. 在引入组件的地方，似乎少了一个右括号：

   <!-- 正确的方式 -->
   <script src="/fcl.umd.js"></script>
   

2. 在 Vue SFC 中，你的 setup() 函数的写法也有问题，YourComponent 没有被正确引入和注册。参考以下修复后的示例：

   <template>
     <YourComponent />
   </template>
   
   <script>
   import YourComponent from './YourComponent.vue';
   
   export default {
     components: {
       YourComponent,
     },
     setup() {
       // 这里可以使用 YourComponent 组件了
     }
   };
   </script>
   

请根据上述建议进行调整，希望这能帮助你解决问题。

Answer 5

未得到解决,具体错误如下：

Unhandled error during execution of render function 
  at <YourComponent> 
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <YourComponent> 


fcl.umd.js:33 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'openBlock')
    at Proxy.p (fcl.umd.js:33:9)

Answer 6

你的库在打包的时候设置了 vue 为外部模块（external），这意味着你的库依赖全局环境中的 Vue。当你的代码通过 CDN 引入并在浏览器中运行的时候，它期望全局环境中已经存在一个名为 Vue 的变量。
在你的代码中看起来像是没有在使用库的前面正确引入 Vue 3。你可能需要在你的 HTML 文件中，或者在引入你的库的脚本之前，先用一个 <script> 标签引入 Vue 3 的 UMD 版本。
以下是引入 Vue3 的例子：
<script src="https://unpkg.com/vue@3"></script>
<script src="/fcl.umd.js"></script>

这样你的库使用 Vue 的时候，就能够在全局环境中找到它了。
呈现页面的时候，记得执行你的库的 install 函数，并传递全局的 Vue 对象进去：
<script>
window.fcl.install(Vue)
</script>

如果你发现你的库中的 Vue 还是未定义，那你可能需要检查一下引入 Vue 的 script 标签的 src 是否正确，或查看网络连线情况，确保 Vue 的脚本已经被正确加载进来。

Answer 7

还有一个问题就是我这边引入的element-plus但是打包成umd后引入没办法解析，引入进来还是el-xxx

Answer 8

问题的答案是由GPT-4Plus模型生成，并经过@晓码自在博主的编辑修改：

你遇到的错误可能是由于以下原因：

• 你的vite.config.js中的globals配置不正确，应该使用Vue而不是vue。
• 你的打包入口文件中的install函数没有正确地返回一个对象，应该在最后加上一个分号。
• 你的引入和使用代码中没有正确地导入和注册Vue，应该在script标签中加上type="module"，并在使用前加上import Vue from 'vue'和Vue.use(fcl)。

以上方法希望对你有所帮助。如果还有疑问，欢迎随时提出。

Answer 9

该回答引用讯飞星火及结果代码方法已验证可行
这个问题可能是由于打包后的库没有正确引入Vue导致的。你可以尝试在vite.config.js中添加以下配置：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: "src/core.js",
      name: "fcl",
      formats: ["es", "umd", "cjs"],
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

然后确保你的入口文件（例如src/core.js）正确引入了Vue：

import Vue from "vue";
import YourComponent from "./YourComponent.vue";

最后，确保你在HTML文件中通过CDN引入了生成的库文件：

<script src="https://unpkg.com/fcl"></script>

这样应该可以解决你遇到的问题。

Answer 10

参考GPT

这个错误通常发生在使用 Vite 和 Vue 3 打包 UMD 库时，可能是由于配置或代码上的一些问题导致的。请尝试以下解决方案：

1. 确认 Vite 和 Vue 版本：确保你正在使用兼容的 Vite 和 Vue 版本。检查你的 package.json 文件中的 dependencies 和 devDependencies，确保 Vite 和 Vue 3 的版本兼容。

2. 检查 Vite 配置：检查你的 Vite 配置文件（通常是 vite.config.js）是否正确配置了 Vue 插件。确保你安装了 vite-plugin-vue 插件，并在配置文件中正确引入和使用了它。示例配置如下：

import { createVuePlugin } from 'vite-plugin-vue';

export default {
  plugins: [
    createVuePlugin(),
  ],
};

1. 检查 Vue 3 版本：如果你已经安装了 Vue 3，但仍然遇到此错误，检查你的代码中是否存在针对 Vue 2 的代码。Vue 3 在模板语法、组件选项等方面有一些变化，需要修改你的代码以适应 Vue 3 的新特性和语法。

2. 检查打包入口：确认你的 UMD 库的打包入口是否正确设置。在 Vite 配置文件中，确保 entry 或 build.input 字段指向正确的文件。

3. 检查代码依赖：如果你的 UMD 库依赖其他的库或组件，请确保这些依赖正确安装，并在代码中正确引入和使用。

4. 检查构建命令：确认你使用的打包命令是否正确。在 package.json 文件中，检查 build 脚本并确保它按预期运行。

如果上述解决方案仍然无法解决问题，请提供更多的代码和配置细节，以便我可以更好地帮助您解决这个问题。

Answer 11

该回答引用ChatGPT，望对题主有所帮助/启发；若有帮助，还望采纳。

---

这个问题可能是由于在打包UMD库时，无法正确地将Vue作为全局变量暴露出去导致的。你可以尝试以下几个解决方法：

1. 在vite.config.js中，将output.globals.vue修改为window.Vue：

   output: {
     globals: {
       vue: "window.Vue",
     },
   },
   

2. 在打包入口文件core.js中，将import YourComponent from "./YourComponent.vue";修改为import YourComponent from "@/YourComponent.vue";，确保文件路径正确。

3. 在打包时，使用resolve.alias设置webpack别名，确保引入的路径是正确的：

   resolve: {
     alias: {
       "@": path.resolve(__dirname, "src"),
     },
   },
   

4. 确保Vue版本是3.x，并且已通过npm install vue@next或yarn add vue@next安装。

尝试以上方法后，重新打包UMD库并通过CDN引入，看看问题是否解决了。

Answer 12

https://blog.csdn.net/qq_59153970/article/details/129829055

Answer 13

qq_42356790 上午好☀️☀️☀️️
本答案参考ChatGPT4和檀越剑指大厂博主整理提供
如果回答的不正确，请及时在评论区回复我，我会根据您的错误描述追加并优化回复。如果解决了您的问题，请帮我点击个采纳！谢谢您的采纳！

这个错误通常是由于在使用vite和vue3打包UMD库时，全局对象(global)未正确引入所导致的。

在使用vite和vue3打包UMD库时，需要确保正确引入全局对象。在vite中，可以通过window对象来引入全局对象。在UMD库的入口文件中，可以使用以下代码来引入全局对象：

// 入口文件
import { createApp, h } from 'vue';

// 创建应用程序
const app = createApp({
  // 应用程序的根组件
  render: () => h(App),
});

// 将应用程序挂载到DOM元素上
app.mount('#app');

// 导出全局对象
export default app;

然后，在使用UMD库的HTML文件中，可以通过window对象来访问全局对象：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My UMD Library</title>
</head>
<body>
  <div id="app"></div>

  <script src="https://cdn.example.com/my-umd-library.js"></script>
  <script>
    // 使用全局对象
    const app = window.myUMDLibrary.default;
    app.mount('#app');
  </script>
</body>
</html>

请确保在使用UMD库之前，全局对象已经正确引入，并且可以通过window对象访问到。这样就可以避免报错"Cannot read properties of undefined (reading 'openBlock')"的问题。

Answer 14

引用讯飞星火
这个问题可能是由于在打包后的代码中，Vue没有被正确引入导致的。你可以尝试以下方法解决这个问题：

1. 确保你的项目中已经安装了vue和@vitejs/plugin-vue。如果没有安装，可以使用以下命令进行安装：

npm install vue @vitejs/plugin-vue

1. 修改你的vite.config.js文件，确保plugins数组中的插件顺序正确。将vue()放在其他插件之前，如下所示：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue(), ...其他插件],
  build: {
    lib: {
      entry: "src/core.js",
      name: "fcl",
      formats: ["es", "umd", "cjs"],
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

1. 确保你的src/core.js文件中正确引入了Vue。你可以在该文件中添加以下代码来检查：

console.log(window.Vue);

如果控制台输出了undefined，那么说明Vue没有被正确引入。你需要检查你的项目配置，确保Vue被正确引入。

1. 如果以上方法都无法解决问题，你可以尝试使用import.meta.env来动态引入Vue。在你的src/core.js文件中，可以添加以下代码：

if (import.meta.env.VITE_APP_ENV === 'production') {
  import('vue').then((Vue) => {
    window.Vue = Vue;
  });
} else {
  window.Vue = require('vue');
}

这段代码会根据当前的环境变量来决定是直接引入vue还是通过动态导入的方式引入。这样可以避免在开发环境下出现错误。

Answer 15

检查外部引入的Vue版本是否与你的Vue3版本匹配。 由于你在打包umd库时使用了external配置并指定了vue,这意味着你希望外部引入的Vue对象和你的打包代码中使用的Vue对象是同一个版本。因此,请确保通过cdn引入的Vue版本与你的Vue3版本相匹配。

在外部引入Vue之前先引入Vite的全局模块 在你的umd库入口文件(即core.js文件)的顶部部分,先引入Vite的全局模块

Vue3报错Cannot read properties of undefined (reading ‘globalProperties‘)_cannot read properties of undefined (reading 'glob-CSDN博客 文章浏览阅读2.1k次。Vue3全局绑定Cannot read properties of undefined (reading 'globalProperties')_cannot read properties of undefined (reading 'globalproperties') https://blog.csdn.net/qq_59153970/article/details/129829055

Answer 16

引用文心一言回答：
你遇到的问题是打包UMD库时全局无法获取Vue。这可能是由于在全局范围内引用Vue时，打包工具无法找到Vue的正确引用路径。

为了解决这个问题，你可以尝试以下几个步骤：

1. 确保Vue的引用路径正确：在vite.config.js中，你可以通过resolve.alias配置项来设置Vue的引用路径。例如，如果你的Vue版本是3，你可以这样配置：

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm-bundler.js' // 根据你的Vue版本进行调整
    }
  },
  build: {
    lib: {
      entry: "src/core.js",
      name: "fcl",
      formats: ["es", "umd", "cjs"],
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
})

1. 检查Vue的版本：确保你使用的Vue版本与你的项目兼容。如果你使用的是Vue 3，那么你需要使用与Vue 3兼容的构建（例如vue/dist/vue.esm-bundler.js）。如果你使用的是Vue 2，那么你需要使用与Vue 2兼容的构建（例如vue/dist/vue.common.js）。
2. 检查核心模块：在你的src/core.js文件中，确保你正确地引用了Vue。例如，你可以像这样引入Vue：

import Vue from 'vue';

然后你可以在全局范围内使用Vue，例如：

Vue.config.productionTip = false;
Vue.config.devtools = true;

1. 清除缓存：有时候，旧的构建缓存可能会导致问题。尝试清除Vite和Rollup的构建缓存，然后重新运行构建命令。你可以通过删除node_modules/.vite和node_modules/.rollup目录来完成这个操作。
2. 检查代码中的错误：如果以上步骤都无法解决问题，那么问题可能出在你的代码中。检查你的代码，确保你没有在不应该的地方引用Vue。另外，检查是否有任何语法错误或类型错误，这些错误可能会导致打包过程失败。

Answer 17

检查外部引入的Vue版本是否与你的Vue3版本匹配

Answer 18

确保Vite的全局模块在引入Vue之前被加载

Answer 19

参考gpt
在使用 Vite 和 Vue 3 打包 UMD 库时，出现了无法读取 'openBlock' 的报错，这通常是因为全局无法正确获取到 Vue 对象所导致的。这可能是由于打包配置中未正确指定全局的 Vue 对象所致。

首先，请确保你已经在全局环境中引入了 Vue，例如在 HTML 文件中：

<script src="https://unpkg.com/vue@next"></script>
<script src="/fcl.umd.js"></script>

然后，你需要在 Vite 的打包配置中正确指定全局的 Vue 对象。根据你提供的 vite.config.js 文件，你已经在 rollupOptions 中设置了 globals，但似乎并没有生效。

你可以尝试以下修改：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: "src/core.js",
      name: "fcl",
      formats: ["es", "umd", "cjs"],
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
  optimizeDeps: {
    include: ["vue"],
  },
});

在这个修改后的配置中，我们添加了 optimizeDeps 字段，并指定了要包括的依赖项，这样可以确保 Vue 在打包时被正确处理。

如果还是遇到问题，可能需要进一步检查打包后的 UMD 文件，确保其中能够正确获取到全局的 Vue 对象。希望这些信息能够帮助你解决问题。如果你有更多的疑问或问题，欢迎随时向我提出。

Answer 20

将默认的main.js的内容：

import { createApp } from 'vue'
import App from './App.vue'
 
createApp(App).mount('#app')

更改为如下再使用全局绑定：

import { createApp } from 'vue'
import App from './App.vue'
 
 
// 为避免Cannot read properties of undefined (reading 'globalProperties')
// 需要将crateApp和mount分开，将全局绑定内容夹在中间
const app = createApp(App)
 
import axios from 'axios'
axios.defaults.baseURL='http://localhost:8088'
app.config.globalProperties.$http=axios
 
app.mount('#app')