Support for the experimental syntax 'explicitResourceManagement' isn't currently enabled

68 Views Asked by At

I'm using Create React App of latest version 5.0.1

My tsconfig.json looks in the foolowing way

{
  "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"
  ]
}

From package json:

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

I'm getting the following issue in Runtime

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):

The code where I get error looks in the following way. I get issue where I'm using new using syntax.

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) => {
      // here I get an exception
      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);
  }
}

I tried to change different settings in tsconfig.json but didn' manage to fix it. Google doesn't help as well.

0

There are 0 best solutions below