uni-app app端异步加载组件会报Invalid value "iife" for option "output.format"

uni-app app端异步加载组件会报Invalid value “iife” for option “output.format”

开发环境	版本号	项目创建方式
Windows	10	HBuilderX

# 操作步骤：
创建 `index.vue`，通过 `import.meta.glob("./components/test.vue")` 方式引入，`components` 文件夹下的 `test.vue` 文件

# 预期结果：
正常打包编译

# 实际结果：
报错：Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds

# bug描述：
app 使用异步引入组件的方式：比如 `import.meta.glob("./components/zytable.vue")`、或 `defineAsyncComponent`

app 调试的时候会直接报：

> Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds  

H5端不会。

是app端本身就不支持异步加载组件吗？

直接使用 `import("./components/zytable.vue")`，异步加载组件，H5端可以渲染，app端直接空白

wuwangju 1楼•12 天前

只有h5端支持异步组件，参考文档

zlyuanteng 2楼•12 天前

那app端有办法进行异步组件加载么？找了一圈，没找到

songsunli 3楼•12 天前

改为下面的写法： const views= import.meta.glob(’/pages/*/.vue’, { eager: true });
let asyncComponents = ref("");//异步渲染的组件
let comp=views[/pages/${变量}.vue];
asyncComponents.value=markRaw(comp.default)
<component :is="asyncComponents" v-if="asyncComponents"></component>

wuwangju 4楼•12 天前

但是组件还未使用的时候，资源也加载了，和同步请求没啥两样了吧

caililin 5楼•12 天前

在使用 uni-app 开发应用时，如果你在 App 端异步加载组件时遇到 Invalid value "iife" for option "output.format" 的错误，通常是因为构建工具在处理异步组件时，配置的模块格式（output.format）不正确。

解决方法

检查构建配置：确保你的构建配置中没有错误地设置了 output.format 为 iife。iife 是一种模块格式，通常用于浏览器环境，但在某些情况下，它可能不适用于异步加载的组件。
使用正确的模块格式：在 uni-app 中，异步加载组件通常使用 import() 语法，这需要构建工具支持 esm 或 cjs 模块格式。你可以尝试将 output.format 设置为 esm 或 cjs。

修改 vite.config.js 或 webpack.config.js：如果你使用的是 Vite 或 Webpack 作为构建工具，可以在配置文件中修改 output.format。

Vite 配置示例：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        format: 'esm', // 或者 'cjs'
      },
    },
  },
});

Webpack 配置示例：

module.exports = {
  output: {
    format: 'esm', // 或者 'cjs'
  },
};

检查 uni-app 版本：确保你使用的 uni-app 版本是最新的，或者至少是一个稳定的版本。某些旧版本可能存在与异步加载组件相关的 bug。
使用 defineAsyncComponent：如果你使用的是 Vue 3，可以尝试使用 defineAsyncComponent 来定义异步组件，这可能会避免一些构建问题。
```
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
);
```