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.