n.e is not a function 问题记录

原文链接: https://github.com/xiaoxiaojx/blog/issues/43

问题简述

TypeError: n.e is not a function 

a 同学说我写的 npm 包 @xxfe/pkg 在 x 项目使用时发布到测试环境报了如上的错误, 但是开发环境没有报错。接着我看了一下 node_modules 中这个包的代码, 这个 Promise 都没 await 咋会被 catch 且还真的被捕获打印了错误日志 , 这是什么瞎猫碰见死耗子的操作 ...

// node_modules/@xxfe/pkg try { this.aesUtilPromise = import('../aes-util') } catch (e) { console.info('123 ========', e); } 

仅看 node_modules 中的代码并未发现明显的错误, 其实我们应该看的是 @xxfe/pkg 打包后的代码

// dist/static/js/xxx.js try { this.aesUtilPromise=n.e(3) } catch(r) { console.info("123 ========",r) } 

打包后的代码就发现了错误的源头 n.e

熟悉 webpack 的同学就知道动态 import 函数打包后会被 webpack_require.e 函数给替换, 其原理就是通过动态创建一个 script 标签来加载一个 js, 如下即函数的代码

/******/ __webpack_require__.e = function requireEnsure(chunkId) { /******/ var promises = []; /******/ /******/ /******/ // JSONP chunk loading for Javascript /******/ /******/ var installedChunkData = installedChunks[chunkId]; /******/ if(installedChunkData !== 0) { // 0 means "already installed". /******/ /******/ // a Promise means "currently loading". /******/ if(installedChunkData) { /******/ promises.push(installedChunkData[2]); /******/ } else { /******/ // setup Promise in chunk cache /******/ var promise = new Promise(function(resolve, reject) { /******/ installedChunkData = installedChunks[chunkId] = [resolve, reject]; /******/ }); /******/ promises.push(installedChunkData[2] = promise); /******/ /******/ // start chunk loading /******/ var script = document.createElement('script'); /******/ var onScriptComplete; /******/ /******/ script.charset = 'utf-8'; /******/ script.timeout = 120; /******/ if (__webpack_require__.nc) { /******/ script.setAttribute("nonce", __webpack_require__.nc); /******/ } /******/ script.src = jsonpScriptSrc(chunkId); /******/ if (script.src.indexOf(window.location.origin + '/') !== 0) { /******/ script.crossOrigin = "anonymous"; /******/ } /******/ // create error before stack unwound to get useful stacktrace later /******/ var error = new Error(); /******/ OnScriptComplete= function (event) { /******/ // ... /******/ }; /******/ var timeout = setTimeout(function(){ /******/ onScriptComplete({ type: 'timeout', target: script }); /******/ }, 120000); /******/ script.Onerror= script.Onload= onScriptComplete; /******/ document.head.appendChild(script); /******/ } /******/ } /******/ return Promise.all(promises); /******/ }; 

问题排查

那么为什么代码中用到了 import 函数, webpack 却没有注入 webpack_require.e 函数的实现了 ?

此时我们只能看 webpack 的代码实现, 可以发现当 Object.keys(chunkMaps.hash).length 条件为 true 时, 才会注入 ${this.requireFn}.e 函数

// webpack/lib/MainTemplate.js this.hooks.requireExtensions.tap("MainTemplate", (source, chunk, hash) => { const buf = []; const chunkMaps = chunk.getChunkMaps(); // Check if there are non initial chunks which need to be imported using require-ensure if (Object.keys(chunkMaps.hash).length) { buf.push("// This file contains only the entry chunk."); buf.push("// The chunk loading function for additional chunks"); buf.push(`${this.requireFn}.e = function requireEnsure(chunkId) {`); buf.push(Template.indent("var promises = [];")); buf.push( Template.indent( this.hooks.requireEnsure.call("", chunk, hash, "chunkId") ) ); buf.push(Template.indent("return Promise.all(promises);")); buf.push("};"); } // ... } 

顺着函数调用顺序发现关键是 getAllAsyncChunks 函数返回值 chunks 集合不为空即可

// webpack/lib/Chunk.js getAllAsyncChunks() { const queue = new Set(); const chunks = new Set(); const initialChunks = intersect( Array.from(this.groupsIterable, g => new Set(g.chunks)) ); for (const chunkGroup of this.groupsIterable) { for (const child of chunkGroup.childrenIterable) { queue.add(child); } } for (const chunkGroup of queue) { for (const chunk of chunkGroup.chunks) { if (!initialChunks.has(chunk)) { chunks.add(chunk); } } for (const child of chunkGroup.childrenIterable) { queue.add(child); } } return chunks; } 

chunks 集合只有一处往集合增加数据的逻辑。initialChunks 可以理解为首屏 html 中 script 标签的 js, 通常是 main.js 及其运行前依赖的 js, 比如 main.js 需要依赖 react, react-dom 等 js 的前置运行。

if (!initialChunks.has(chunk)) { chunks.add(chunk); } 

因为业务项目 webpackConfig.optimizationa.splitChunks 的配置把 a 同学写的 @xxfe/pkg 包都打入到了 xxfe_vendor 文件中, 而 @xxfe/ scope 下的依赖被业务项目大量使用, 所以无疑是业务项目 main.js 前置依赖的一个 js, 故 xxfe_vendor 在首屏 html 中 script 标签的 js 中

所以 xxfe_vendor 是 initialChunks 中的其中一个, 故此处 if 为 false

xxfe_vendor: { name: 'xxfe_vendor', chunks: 'all', priority: 8, enforce: true, test: (module) => { const resource = getModulePath(module) if (/@xxfe(\\|\/)/.test(resource)) { return true } return false }, }, 

至此我们理清了导致问题的原因, @xxfe/pkg中的 import 函数引用的 js 及其自身代码由于分包的 splitChunks 设置都被打入到了 xxfe_vendor 中, 而 xxfe_vendor 又是业务项目 main.js 前置运行依赖的 js, 故 webpack 错误的认为你不需要 webpack_require.e 函数

• webpack 版本: 4.39.0

Q: 这个算谁的 bug ?

A: webpack 的 bug 。因为不能说用户需要加载的 js 如果在首屏其中之一, 就不注入 webpack_require.e 函数的实现。业务项目通过 splitChunks 进行分包不是 npm 包的作者所能决定, 是否注入 webpack_require.e 函数的实现应该由是否有 import 函数语法来决定。

Q: 为什么开发环境没有报错 ?

A: 业务项目的 splitChunks 设置了只在生产构建生效

问题解决

将如下的 chunks 字段由 all 改为了 initial, 表示该分包设置将不要影响到动态 import 函数异步加载的 js (该类型为 async chunks), 使得 @xxfe/pkg 将不会被合入 xxfe_vendor 文件中, 那么如上的 initialChunks 也将不包含 @xxfe/pkg, 从而 webpack 也会如约注入 webpack_require.e 函数的实现

xxfe_vendor: { name: 'xxfe_vendor', chunks: 'initial', priority: 8, enforce: true, test: (module) => { const resource = getModulePath(module) if (/@xxfe(\\|\/)/.test(resource)) { return true } return false }, },