uni-app中vue3+typescript使用pako@2.1.0启动不了h5
uni-app中vue3+typescript使用pako@2.1.0启动不了h5
问题描述
引入方式
npm install pako
npm install @types/pako
运行环境
运行到浏览器 Chrome
代码问题
在 ts 文件中引入 pako 后报错：
import pako from "pako";
报错信息
20:38:39.616 X [ERROR] [plugin uni:dep-scan] Unbalanced delimiter found in string
20:38:39.616 node_modules/xregexp/src/addons/matchrecursive.js:176:22:
20:38:39.616 176 │ throw new Error('Unbalanced delimiter found in st...
20:38:39.616 ╵ ^
20:38:39.616 at Function.XRegExp.matchRecursive (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\xregexp\src\addons\matchrecursive.js:176:23)
20:38:39.632 at matchReplacePass (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:309:27)
20:38:39.632 at replaceRecursive (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:339:10)
20:38:39.632 at preprocessor (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:164:10)
20:38:39.632 at preprocess (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:89:10)
20:38:39.632 at preJs (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\dist\preprocess\index.js:10:12)
20:38:39.632 at D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5-vite\dist\plugin\esbuild\esbuildPrePlugin.js:21:59
20:38:39.647 at requestCallbacks.on-load (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1426:28)
20:38:39.647 at handleRequest (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:727:19)
20:38:39.647 at handleIncomingPacket (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:749:7)
20:38:39.647 This error came from the "onLoad" callback registered here:
20:38:39.647 node_modules/@dcloudio/uni-h5-vite/dist/plugin/esbuild/esbuildPrePlugin.js:15:18:
20:38:39.663 15 │ build.onLoad({ filter: exports.JS_TYPES_RE }, ({ path:...
20:38:39.663 ╵ ~~
Error: Build failed with 1 error:
node_modules/xregexp/src/addons/matchrecursive.js:176:22: ERROR: [plugin: uni:dep-scan] Unbalanced delimiter found in string
错误详情
{
errors: [
{
detail: Error: Unbalanced delimiter found in string
at Function.XRegExp.matchRecursive (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\xregexp\src\addons\matchrecursive.js:176:23)
at matchReplacePass (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:309:27)
at replaceRecursive (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:339:10)
at preprocessor (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:164:10)
at preprocess (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:89:10)
at preJs (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\dist\preprocess\index.js:10:12)
at D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5-vite\dist\plugin\esbuild\esbuildPrePlugin.js:21:59
at requestCallbacks.on-load (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1426:28)
at handleRequest (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:727:19)
at handleIncomingPacket (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:749:7),
id: '',
location: {
column: 22,
file: 'node_modules/xregexp/src/addons/matchrecursive.js',
length: 0,
line: 176,
lineText: " throw new Error('Unbalanced delimiter found in string');\n" +
' at Function.XRegExp.matchRecursive (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\xregexp\src\addons\matchrecursive.js:176:23)\n' +
' at matchReplacePass (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:309:27)\n' +
' at replaceRecursive (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:339:10)\n' +
' at preprocessor (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:164:10)\n' +
' at preprocess (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\lib\preprocess\lib\preprocess.js:89:10)\n' +
' at preJs (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-cli-shared\dist\preprocess\index.js:10:12)\n' +
' at D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5-vite\dist\plugin\esbuild\esbuildPrePlugin.js:21:59\n' +
' at requestCallbacks.on-load (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1426:28)\n' +
' at handleRequest (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:727:19)\n' +
' at handleIncomingPacket (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:749:7)',
namespace: 'file',
suggestion: ''
},
notes: [
{
location: {
column: 18,
file: 'node_modules/@dcloudio/uni-h5-vite/dist/plugin/esbuild/esbuildPrePlugin.js',
length: 6,
line: 15,
lineText: ' build.onLoad({ filter: exports.JS_TYPES_RE }, ({ path: id }) => {\n' +
' at setup (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5-vite\dist\plugin\esbuild\esbuildPrePlugin.js:15:19)\n' +
' at handlePlugins (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1287:21)\n' +
' at buildOrServeImpl (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:974:5)\n' +
' at Object.buildOrServe (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:780:5)\n' +
' at D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2132:17\n' +
' at new Promise (<anonymous>)\n' +
' at Object.build (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2131:14)\n' +
' at build (D:\dev\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1978:51)\n' +
' at runOptimizeDeps (file:///D:/dev/HBuilderX/plugins/uniapp-cli-vite/node_modules/vite/dist/node/chunks/dep-ca21228b.js:42966:26)',
namespace: 'file',
suggestion: ''
},
text: 'This error came from the "onLoad" callback registered here:'
}
],
pluginName: 'uni:dep-scan',
text: 'Unbalanced delimiter found in string'
}
],
warnings: []
}
13 回复
回复 1***@163.com: 你去看看源码就一目了然了，他应该是做了taro的适配，存在与uniapp不符合的条件编译。他的dist文件夹中有许多文件，你找一个没有条件编译的作为包的入口文件就行
这个问题我也遇到了，我的是无论h5和app都有这个问题，我的只是解压 所以 在入口文件 注释掉一部分应用app就好了,但是h5还是有这个问题。
‘use strict’;
// const { Deflate, deflate, deflateRaw, gzip } = require(’./lib/deflate’);
const { Inflate, inflate, inflateRaw, ungzip } = require(’./lib/inflate’);
const constants = require(’./lib/zlib/constants’);
// module.exports.Deflate = Deflate;
// module.exports.deflate = deflate;
// module.exports.deflateRaw = deflateRaw;
// module.exports.gzip = gzip;
module.exports.Inflate = Inflate;
module.exports.inflate = inflate;
module.exports.inflateRaw = inflateRaw;
module.exports.ungzip = ungzip;
module.exports.constants = constants;
在uni-app中使用Vue 3结合TypeScript时，如果遇到因pako@2.1.0导致H5启动不了的问题，通常可能是由于模块兼容性问题或者打包配置不正确。以下是一些可能的解决方案，包括相关代码案例，以帮助你定位并解决问题。
1. 检查pako的导入方式
首先确保你正确导入了pako。在TypeScript项目中，正确的类型定义对于避免编译错误至关重要。如果pako没有提供官方的类型定义文件，你可能需要安装一个第三方类型定义或者自己声明模块类型。
// 如果pako没有官方类型定义，可以在项目中添加一个声明文件，例如pako.d.ts
declare module 'pako' {
export function inflate(data: Uint8Array): Uint8Array;
export function deflate(data: Uint8Array): Uint8Array;
// 根据你的需求添加更多函数声明
}
// 在你的Vue组件或逻辑文件中导入pako
import pako from 'pako';
export default {
setup() {
const handleData = () => {
const compressedData = new Uint8Array([/* ... */]);
const uncompressedData = pako.inflate(compressedData);
// 使用解压后的数据
};
return { handleData };
}
};
2. 配置Webpack（如果适用）
uni-app在H5端默认使用Vue CLI的Webpack配置。如果pako因为某些Webpack配置而无法正常工作，你可能需要调整这些配置。
// vue.config.js
const webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
// 例如，如果需要处理某些特定的loader配置
new webpack.ProvidePlugin({
pako: 'pako'
})
],
resolve: {
fallback: {
// 如果pako依赖了某些Node.js内置模块，这里可以提供polyfill
"buffer": require.resolve("buffer/")
}
}
}
};
3. 检查package.json和node_modules
确保package.json中pako的版本正确，并且node_modules中的pako包没有损坏。可以尝试删除node_modules文件夹和package-lock.json或yarn.lock文件，然后重新运行npm install或yarn来安装依赖。
rm -rf node_modules package-lock.json # 或者 yarn.lock
npm install # 或者 yarn install
总结
以上步骤涵盖了检查pako的导入方式、配置Webpack（如果适用），以及确保依赖正确安装。这些步骤通常可以帮助解决因第三方库导致的启动问题。如果问题依然存在，建议检查uni-app和Vue 3的社区和官方文档，看看是否有其他开发者遇到并解决了类似的问题。
