Create React App中explicitResourceManagement语法支持问题求助

使用Create React App 5.0.1 + TypeScript 5.3.3开发时，在代码中使用using显式资源管理语法出现以下报错：

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/cherkalexander/Documents/projects/gitlab-codereview-analyzer/src/hooks/useRequest.ts: Support for the experimental syntax 'explicitResourceManagement' isn't currently enabled (23:7)

当前相关配置：

• tsconfig.json：

{
  "compilerOptions": {
    "target": "es2022",
    "lib": [
      "es2022",
      "esnext.disposable",
      "dom"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

• package.json相关依赖：

"typescript": "^5.3.3",
"react-scripts": "5.0.1",
"disposablestack": "^1.1.2",

报错代码片段：

import { useState, useCallback } from 'react';

interface RequestCallback<TResult, Params extends any[]> {
  (...parameters: Params): Promise<TResult>;
}

interface UseRequestResult<TResult, Params extends any[]> {
  makeRequest: RequestCallback<TResult | undefined, Params>;
  isLoading: boolean;
  response: TResult | undefined;
  error: any | null;
}

export function useRequest<TResult, Params extends any[]>(
  request: RequestCallback<TResult, Params>
): UseRequestResult<TResult, Params> {
  const [isLoading, setIsLoading] = useState(false);
  const [response, setResponse] = useState<TResult | undefined>(undefined);
  const [error, setError] = useState<any | null>(null);

  const makeRequest: RequestCallback<TResult | undefined, Params> = useCallback(
    async (...parameters) => {
      // 报错位置
      using manager = new LoadingManager(setIsLoading);
      
      try {
        const data = await request(...parameters);
        setResponse(data);
        return data;
      } catch (error) {
        console.log(error);
        setError(error);
      }
    },
    [request]
  );

  return { makeRequest, isLoading, response, error };
}

class LoadingManager implements Disposable {
  constructor(private setIsLoading: (value: boolean) => any) {
    this.setIsLoading(true);
  }

  [Symbol.dispose]() {
    this.setIsLoading(false);
  }
}

问题核心是Create React App 5.x的默认Babel配置未启用explicitResourceManagement语法支持——虽然TypeScript已经兼容该语法，但Babel转译时无法识别，需要通过自定义配置解决：

步骤1：安装依赖 #

安装craco（用于覆盖CRA默认配置）和对应Babel插件：

npm install @craco/craco @babel/plugin-proposal-explicit-resource-management --save-dev

步骤2：创建Craco配置文件 #

在项目根目录新建craco.config.js，添加Babel插件配置：

module.exports = {
  babel: {
    plugins: [
      "@babel/plugin-proposal-explicit-resource-management"
    ]
  }
};

步骤3：修改启动脚本 #

在package.json中把原有的react-scripts命令替换为craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

步骤4：确保Polyfill生效 #

在项目入口文件（如src/index.tsx）顶部导入polyfill：

import 'disposablestack';

验证 #

重启开发服务后，using语法即可正常编译运行。

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