Vue组件引入screenfull.js报require is not defined错误如何解决

触发该报错的核心逻辑：

• 你当前安装的screenfull版本为v6+，该版本分支仅提供ESM规范产物，不支持CommonJS的require()引入方式
• 项目babel.config.js中开发环境启用了dynamic-import-node插件，该插件会将所有ESM的import语句转换为CommonJS规范的require()调用，浏览器运行环境无require全局API，直接抛出引用错误。

以下方案任选其一即可修复问题：

方案1：降级screenfull版本（无额外配置改动，成本最低） #

screenfull@5.x版本同时兼容ESM和CommonJS规范，和现有构建配置完全适配，执行以下命令锁定版本：

npm install screenfull@5.2.0 --save

安装完成后保留原有import screenfull from "screenfull"的引入写法，重启开发服务即可正常调用全屏相关API。

方案2：移除babel中不匹配浏览器场景的转译插件 #

dynamic-import-node是为Node.js运行环境设计的转译插件（多用于单元测试场景），webpack5原生支持ESM模块与动态import语法，浏览器构建场景不需要该插件。
直接修改babel.config.js，删除开发环境对应的插件配置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 删除以下env配置块
  // env: {
  //   development: {
  //     plugins: ['dynamic-import-node']
  //   }
  // },
  plugins: ['lodash']
}

修改后重启开发服务，高版本screenfull可被webpack正常打包，不会再出现require未定义的报错。

方案3：动态引入screenfull（保留现有配置时可选） #

如果不想改动babel配置、也不想降级screenfull版本，可以放弃静态引入，改为在触发全屏逻辑时动态导入模块：

// 组件内全屏切换方法示例
const handleToggleFullscreen = async () => {
  const sf = await import('screenfull')
  const screenfull = sf.default
  if (screenfull.isEnabled) {
    screenfull.toggle()
  }
}

该写法会被webpack自动拆分为独立chunk，触发对应逻辑时才加载模块，可避开babel对静态import的转译规则。

内容的提问来源于stack exchange，提问作者biubiupiu