uni-app 4.28版本打包引用commonjs规范的第三方库项目报错 import*as commonjsHelpers

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app 4.28版本打包引用commonjs规范的第三方库项目报错 import*as commonjsHelpers

示例代码：

附件内有项目模板，下载依赖后打包即可复现

操作步骤：

点击发行就编译失败

预期结果：

应正常编译打包

实际结果：

打包报错

bug描述：

打包时报错

import * as commonjsHelpers from xxxxx

初步怀疑是这个版本升级了vite相关依赖导致无法编译使用了commonjs规范的第三方库


| 开发环境       | 版本号 | 项目创建方式 |
|----------------|--------|--------------|
| Windows        | win10  | HBuilderX    |
| HBuilderX      | 4.28   |              |
| Chrome         | 126.0.2592.102 |            |

Harmonyos Next教程
6 回复

下载附件，解压出json.js，替换HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-cli-shared/dist/vite/plugins/json.js，然后试试


替换了不起作用

回复 小新的狗叫小白: 你是HBuilderX项目吗？如果是cli项目，需要替换自己项目node_modules/@dcloudio/uni-cli-shared/dist/vite/plugins/json.js

回复 DCloud_UNI_FengXY: 替换后换了个报错 “traverse” is not exported by “node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js”, imported by “node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js”.

回复 小新的狗叫小白: 发测试工程

在处理uni-app 4.28版本打包时引用CommonJS规范的第三方库项目报错的问题时，通常涉及到模块解析和打包配置。uni-app默认支持ES6模块规范，对于CommonJS规范的库可能需要额外的配置或处理。以下是一个可能的解决方案，通过配置webpack来支持CommonJS规范的库。

配置Webpack以支持CommonJS

虽然uni-app直接暴露的webpack配置较少，但你可以通过vue.config.js文件或修改manifest.json中的mp-webpack-chain配置来间接影响webpack的行为。这里我们假设你能够通过某种方式访问或修改webpack配置。

1. 自定义Webpack配置（如果可能）

如果你能够访问vue.config.js文件，可以尝试添加对CommonJS模块的支持：

// vue.config.js
const webpack = require('webpack');

module.exports = {
  configureWebpack: config => {
    // 添加对node_modules中CommonJS模块的支持
    config.resolve.symlinks(true);
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: [
            // 必要的babel插件
          ],
        },
      },
    });

    // 确保webpack能够正确解析CommonJS模块
    config.plugins.push(
      new webpack.ProvidePlugin({
        // 你可以根据需要添加更多的库
        $: 'jquery',
        jQuery: 'jquery',
      })
    );
  },
};

2. 修改manifest.json中的mp-webpack-chain（如果适用）

对于uni-app，更常见的是通过修改manifest.json中的mp-webpack-chain配置来影响webpack链式配置：

// manifest.json
{
  "mp-webpack-chain": {
    "chainWebpack": (chain) => {
      chain.resolve.symlinks(true);
      chain.module
        .rule('commonjs')
        .test(/\.js$/)
        .include.add(/node_modules/)
        .end()
        .use('babel-loader')
        .loader('babel-loader')
        .options({
          presets: ['@babel/preset-env'],
          // 其他babel配置
        });
    }
  }
}

注意

  • 上述代码示例是基于可能的webpack配置修改，实际使用时可能需要根据uni-app的具体版本和webpack配置进行调整。
  • uni-app的打包流程可能会随着版本更新而变化，确保查阅最新的官方文档或社区资源以获取最新的配置信息。
  • 如果上述方法不适用，考虑在官方社区或GitHub仓库中搜索类似问题或提出issue。
回到顶部