este es el error que me sale
./src/core/providers/todoApi/TodoApiProvider.ts 10:14 Error al analizar el módulo: carácter inesperado '@' (10:14) El archivo se procesó con estos cargadores:
constructor(@inyectar(TIPOS.HttpClient) | httpClient) { | this.httpClient = vacío 0;
TodoApiProvider.ts
class DefaultTodoApiProvider implements TodoApiProvider { private httpClient: HttpClient; // @inject(TYPES.HttpClient) return error constructor(@inject(TYPES.HttpClient) httpClient: HttpClient) { this.httpClient = Dependency.get(TYPES.HttpClient); } async getTodoById(id: string) { const data = await this.httpClient.get( `https://jsonplaceholder.typicode.com/todos/${id}` ); return data; } } decorate(injectable(), TodoApiProvider); export default DefaultTodoApiProvider; Si pongo @inject(TYPES.HttpClient) encima private httpClient: HttpClient; obtendrá otro error Cannot access 'TYPES' before initialization .
.babelrc
{ "presets": [ ..., "@babel/preset-typescript" ], "plugins": [ ..., "babel-plugin-transform-typescript-metadata", ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }] ], "env": { "test": { "plugins": [ "transform-require-context", "babel-plugin-transform-typescript-metadata", "babel-plugin-parameter-decorator" ] } } } tsconfig.js
{ "compilerOptions": { ..., "emitDecoratorMetadata": false, }, }Las propuestas de decorador de la etapa 1 y la etapa 2 no admiten decoradores de parámetros. Los @babel/plugin-proposal-decorators que implementan las propuestas no saben cómo manejar los decoradores de parámetros. Como resultado, se produjo el mensaje de error Unexpected character '@' . Solo Typescript es consciente de los decoradores de parámetros .
Uso Next.js no CRA pero creo que es el mismo problema. Para Next.js, resolví este problema instalando ts-loader y configurando la configuración del paquete web de Next.js para usar ts-loader antes que babel-loader.
El fragmento a continuación es específico de Next.js. Lo menciono para aclarar mi punto.
config.module.rules.forEach((rule) => { if (rule.test instanceof RegExp && rule.test.test(".ts")) { if (Array.isArray(rule.use)) { rule.use.push("ts-loader"); } else { rule.use = [rule.use, "ts-loader"]; } } }); Acerca de acceder a TIPOS antes de la inicialización, no investigué por qué sucede, ya que se resuelve usando ts-loader también al solucionar el primer problema.