最新版uni-app在utils中的文件不支持class-async语法

开发环境	版本号	项目创建方式
Mac	12.3.1	CLI

示例代码：

// utils/http.js  
class Http{  
 async init(){}
}  
export default new Http()  

// app.vue  

import http from '@/utils/http'

操作步骤：

vue create -p dcloudio/uni-preset-vue my-project  
cd my-project

预期结果：

不知道是不是1.18.0版本缺少哪个自动引入的插件

实际结果：

chunk-vendors.js:12075 Uncaught TypeError: Cannot set properties of undefined (setting 'default')
at _regeneratorRuntime (chunk-vendors.js:12075:19)
at eval (7Qib:37:98)
at eval (7Qib:54:6)
at eval (7Qib:57:2)
at Object.7Qib (index.js:1040:1)
at webpack_require (index.js:854:30)
at fn (index.js:151:20)
at eval (http.js:1:1)
at Object.dRp0 (index.js:1386:1)
at webpack_require (index.js:854:30)
_regeneratorRuntime @ chunk-vendors.js:12075
eval @ 7Qib:37
eval @ 7Qib:54
eval @ 7Qib:57
7Qib @ index.js:1040
webpack_require @ index.js:854
fn @ index.js:151
eval @ http.js:1
dRp0 @ index.js:1386
webpack_require @ index.js:854
fn @ index.js:151
eval @ App.vue:2
O07N @ index.js:1130
webpack_require @ index.js:854
fn @ index.js:151
eval @ null:1
I77X @ index.js:1118
webpack_require @ index.js:854
fn @ index.js:151
eval @ null:1
Pf3K @ index.js:1142
webpack_require @ index.js:854
fn @ index.js:151
eval @ main.js:2
Vtdi @ index.js:1154
webpack_require @ index.js:854
fn @ index.js:151
1 @ index.js:1009
__webpack_require__ @ index.js:854
checkDeferredModules @ index.js:46
Show 2 more frames

bug描述：

一周前创建了新项目, utils/http.js 文件内容如下所示:

class Http{  
 async init(){}
}  
export default new Http()

songsunli 1楼•13 天前

我也遇到了同样的问题。

caililin 2楼•13 天前

我也是

songsunli 3楼•13 天前

我也是

zlyuanteng 4楼•13 天前

解决方法：
https://blog.csdn.net/qq_41614928/article/details/125387594

itying888 5楼•13 天前

解决方法

zlyuanteng 6楼•13 天前

在最新版的 uni-app 中，如果你在 utils 目录下的文件中使用 class-async 语法时遇到问题，可能是由于以下几个原因：

1. Babel 配置问题

uni-app 默认使用的是 Babel 进行代码转换，但可能默认配置中没有包含对 async 语法的支持。你可以通过自定义 Babel 配置来解决这个问题。

在项目根目录下创建或修改 .babelrc 文件，确保包含以下配置：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-async-generator-functions"
  ]
}

安装所需的 Babel 插件：

npm install --save-dev @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties @babel/plugin-proposal-async-generator-functions

2. TypeScript 配置问题

如果你使用的是 TypeScript，确保 tsconfig.json 中的 target 设置为 ES2017 或更高版本，以支持 async 语法。

{
  "compilerOptions": {
    "target": "ES2017",
    "module": "ESNext",
    "lib": ["ES2017", "DOM"],
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "strict": true
  }
}

3. uni-app 版本问题

确保你使用的是最新版本的 uni-app，因为旧版本可能对 async 语法的支持不完善。你可以通过以下命令更新 uni-app：

npm install -g [@vue](/user/vue)/cli
vue create -p dcloudio/uni-preset-vue my-project

4. 代码示例

以下是一个在 utils 目录下使用 class-async 语法的示例：

// utils/myClass.js
export default class MyClass {
  async myAsyncMethod() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('Hello, world!');
      }, 1000);
    });
  }
}

然后在你的组件或页面中使用这个类：

// pages/index/index.vue
import MyClass from '@/utils/myClass';

export default {
  async mounted() {
    const instance = new MyClass();
    const result = await instance.myAsyncMethod();
    console.log(result); // 输出: Hello, world!
  }
}