uni-app编译到app报错Invalid value "iife" for option "output.format"
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.
找不到问题所在,这个错误是由什么原因引起的呢?
这个帖子存在较久了,请参考评论区回答进行问题排查:
删除 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: 直接删除?图片还要用怎么修改呢
我这边是用到了 import.meta.glob 匹配导入,换一种方式就好了
然后呢 用到defineAsyncComponent了吗
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的写法换了之后就可以了
同样遇到了 怎么解决啊
我也遇到这个问题了,怎么处理呀
在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.format
为iife
。以下是一个简化的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.format
为iife
。如果问题依旧存在,可能需要检查是否有第三方插件或脚本错误地修改了Webpack配置。