加载Web应用时报Cannot set property 'esprima' of undefined错误求助

问题根因 #

报错的核心是UMD兼容代码执行到兜底分支时，root参数为undefined，无法挂载esprima属性：

• 代码中root取自IIFE传入的顶层this
• ES模块规范下（如页面引入脚本加了type="module"属性），顶层作用域的this默认是undefined，而非浏览器环境的window
• 如果你使用的是Webpack 5版本，Webpack默认会把UMD封装的顶层this编译为undefined，不再默认指向全局对象

修复方案 #

方案1：修改Webpack配置（适配你当前的构建场景） #

在webpack.config.js的output配置段新增globalObject字段，手动指定UMD封装的全局对象，兼容多环境：

module.exports = {
    entry: {
        // import: './src/Three.js'
    },
    mode: 'production',
    output: {
        path: __dirname,
        publicPath: '/',
        filename: './build/three.min.js',
        // 新增以下配置
        globalObject: 'typeof self !== \'undefined\' ? self : this'
    },
    devServer: {
        watchContentBase: true,
        publicPath: "/",
        contentBase: "./",
        hot: true,
        port: 9090,
    },
};

方案2：调整esprima加载方式 #

如果不需要把esprima挂载到全局，优先使用ES模块语法导入：

import * as esprima from 'esprima'

避免直接引入UMD版本的esprima脚本。

方案3：修改UMD兜底逻辑（仅针对自行编译esprima的场景） #

把报错行的兜底逻辑替换为主动识别全局对象的代码：

else {
    const global = root || window || globalThis
    global["esprima"] = factory()
}

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