UMD方式引入时，二维码组件报错，导致浏览器不兼容 ReferenceError: naive is not defined

[rysonliu]

描述错误

在使用较低，但不是很低版本的浏览器，并且用UMD方式引入时，浏览器不兼容 ReferenceError: naive is not defined

复现步骤

1.使用较低版本chrome，例如：https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win_x64/800850/
2.用上述版本浏览器访问官方文档的UMD演示页面：https://jsbin.com/mutewosewu/edit?html,console,output
3.js会有报错，页面也无法正常渲染
4.访问官方文档的非UMD方式导入的二维码组件页面是正常的：https://www.naiveui.com/zh-CN/os-theme/components/qr-code

最小复现链接

https://jsbin.com/mutewosewu/edit?html,console,output

系统信息

chrome：87.0.4242.0
naiveUI：2.38.1
vue：latest

使用的包管理器

pnpm

验证

• 阅读 贡献指南。
• 阅读 文档。
• 检查是否已经存在相同问题的问题，以避免创建重复的问题。
• 确保这是一个具体的 bug。有关问题和答案，请打开 GitHub 讨论。
• 提供的复现是最小可复现的示例。

[rysonliu]

本地报错截图显示是二维码组件部分的代码引起的：

[lisonge]

是 umd 的 build.target 没有设置或为 esnext 引起的

naive-ui/rollup.config.js

Lines 31 to 40 in d1d306c

	const umdConfig = defineConfig({
	output: {
	name: 'naive',
	format: 'umd',
	exports: 'named',
	globals: {
	vue: 'Vue'
	}
	}
	})

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks#browser_compatibility

根据 Static_initialization_blocks 的兼容性 chrome94，这意味着 naive-ui 的 umd 链接只能在 chrome94 以上工作

---

ui 库的 umd 这种能独立直接使用的格式实际上应该设置较低的转译目标，并且应该自包含 polyfill

[rysonliu]

是 umd 的 build.target 没有设置或为 esnext 引起的

naive-ui/rollup.config.js

Lines 31 to 40 in d1d306c

	const umdConfig = defineConfig({
	output: {
	name: 'naive',
	format: 'umd',
	exports: 'named',
	globals: {
	vue: 'Vue'
	}
	}
	})

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks#browser_compatibility

根据 Static_initialization_blocks 的兼容性 chrome94，这意味着 naive-ui 的 umd 链接只能在 chrome94 以上工作

感谢答复！