uni-app编译到app报错Invalid value "iife" for option "output.format"

发布于 1周前 作者 yuanlaile 来自 uni-app

uni-app编译到app报错Invalid value “iife” for option “output.format”
uniapp编译app真机运行报错:Invalid value “iife” for option “output.format” - UMD and IIFE output formats are not supported for code-splitting builds.
找不到问题所在,这个错误是由什么原因引起的呢?

图片


31 回复

这个帖子存在较久了,请参考评论区回答进行问题排查:

删除 pages.json 和页面组件缩小问题范围,看是哪个页面有问题
检查组件动态引入部分,比如 import、async import、import glob 等方法,在 app 端使用 import glob 引入
使用 glob 引入请使用 vite 新写法,也就是 eager:true ,旧版本写法已被废弃
参考评论区 app端不支持异步加载组件的回复


我也遇到了这个问题 官方似乎没有解决方法和注意事项

有解决吗

回复 Watler: 你有解决吗

回复 z***@163.com: 解决了,我是用的vue3版本, 项目中被同事引入了vue2组件导致的

我也遇到了 这个问题

都是这个问题么

对啊,uniapp用vite+vue3 真机调试都这样 不知丢怎么弄

是不是得配置vite.config.js

回复 9*@qq.com: 我刚刚找到了我这里的问题是因为我用了import(’…/…/.png’)导出了图片,然后我直接删除就好了

回复 1***@qq.com: 可以看下你的vite.config.js吗

回复 1***@qq.com: 直接删除?图片还要用怎么修改呢

我这边是用到了 import.meta.glob 匹配导入,换一种方式就好了

然后呢 用到defineAsyncComponent了吗

回复 2***@qq.com: 没有用到

回复 igreatd: let modules = import.meta.glob(’…/…/common/demo.ts’);这样使用还是提示上面那个

const modules = import.meta.glob(’./dir/*.js’, { eager: true })你是这样使用的吗

//…
{
title: ‘版本号’,
isIcon: true,
// img: import(’@/static/b-face/my-code.png’),
titleSuffix: ‘v0.0.1’,
label: ‘当前已是最新版本’,
}
//… 我是在代码中存在 import(‘xxx’) 注释

请问贴主有解决这个问题吗,我打包的时候也碰到了,还没找到解决办法

请提供下可复现的工程

应该是项目里只能用vue3的语法,我把i项目里部分vue2的写法换了之后就可以了

同样遇到了 怎么解决啊

我也遇到这个问题了,怎么处理呀

原因:lib.formats默认 [‘es’, ‘umd’],output.format默认es,不支持多个值
解决方案:lib.formats设置为[‘es’]
我使用这个方法解决了

在vite.config.js里面配置吗?能否截个图

大佬,能否分享下您是怎么解决的,十分感谢

我这边是吧defineAsyncComponent改成import就好啦

import { defineConfig } from “vite”; import uni from “@dcloudio/vite-plugin-uni”; // https://vitejs.dev/config/ export default defineConfig({ plugins: [uni()], css: { postcss: { plugins: [ require(“tailwindcss”), require(“autoprefixer”), ] } }, build: { lib: { entry: ‘src/main.ts’, // 入口文件 name: ‘MyLibrary’, // 库的名称 fileName: (format) => my-library.${format}.js, // 输出文件名 formats: [‘es’], // 输出格式 } } });

app端吗?app端是不是导入了什么组件?我也碰到了这个问题,我在项目里里导入了pdfjs组件,h5端运行正常,app端编译错误,最后花了一天查资料试了一堆看到个帖子说是app端不支持异步加载组件; 下面是官方人员的回答; https://ask.dcloud.net.cn/question/201152

感谢补充,我贴上去

在uni-app的开发过程中,如果遇到编译到App时报错“Invalid value ‘iife’ for option ‘output.format’”,这通常意味着在构建配置中使用了不被支持的输出格式。uni-app基于Vue.js开发,其构建流程依赖于Webpack等工具,而这些工具在打包输出时有特定的格式要求。

在Webpack的配置中,output.format选项用于指定输出文件的格式,常见的格式有es(ECMAScript模块)、cjs(CommonJS模块)、umd(Universal Module Definition)、iife(Immediately Invoked Function Expression)等。然而,uni-app在编译为原生App时,并不直接支持Webpack的所有输出格式,尤其是iife格式,因为它主要用于浏览器环境。

要解决这个问题,你需要检查并修改uni-app项目中的Webpack配置,确保没有错误地设置了output.formatiife。以下是一个简化的Webpack配置示例,展示了如何正确设置输出格式(注意:uni-app通常不需要直接修改Webpack配置,除非通过自定义脚本或插件):

// webpack.config.js 示例(uni-app通常不直接修改此文件)
const path = require('path');

module.exports = {
  // ... 其他配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    // 确保这里不设置为 'iife'
    libraryTarget: 'umd', // 适用于多种环境,包括Node.js和浏览器
    globalObject: 'this'  // 确保global对象在不同环境下正确解析
  },
  // ... 其他配置,如loader、plugin等
};

在uni-app项目中,如果你需要自定义Webpack配置,通常是通过vue.config.js文件(如果存在)或者通过修改manifest.json中的相关配置来实现。然而,对于output.format这样底层的Webpack配置,uni-app框架本身已经做了适配,用户通常不需要手动设置。

如果确实需要在uni-app项目中引入特定的Webpack配置,建议通过官方文档或社区查找是否有推荐的插件或方法,避免直接修改Webpack配置导致兼容性问题。

总之,针对这个错误,检查并确保没有错误地设置了Webpack的output.formatiife。如果问题依旧存在,可能需要检查是否有第三方插件或脚本错误地修改了Webpack配置。

回到顶部