How to enable @ experimentalDecorators in next.config.js or babelrc

Question

Hi if someone would help me, I wanna use @Decorators on my nextjs app, but I get the following error.

Hope someone knows what Im doin wrong

Error message:

Syntax error: Support for the experimental syntax 'decorators-legacy' isn't currently enabled:

I'm trying to use typeorm / type-graphql to generate my backend in an app subfolder.

app/booking/model/booking.ts

import {
  Field,
  ID,
  ObjectType,
} from 'type-graphql';
import {
  BaseEntity,
  ManyToOne,
  Column,
  CreateDateColumn,
  Entity,
  PrimaryGeneratedColumn,
  UpdateDateColumn,
  VersionColumn,
} from 'typeorm';
import { ArrayNotEmpty, ArrayMinSize, IsPositive, Min, IsNotEmpty, ValidateNested, MaxLength, Length, IsArray, IsNumber, Max, ArrayMaxSize, ArrayUnique, IsBase64, IsString } from "class-validator";
  // import {User} from '@accounts/typeorm'
// extends interface User {
//   documents: [Booking]
// };

// const entities = require('@accounts/typeorm').entities;
// const {User} = entities;
/**
 * @export
 * @class Booking
 * @extends {BaseEntity}
 */
@Entity()
@ObjectType()
export default class Booking extends BaseEntity {
  @Field(() => ID)
  @PrimaryGeneratedColumn('uuid')
  id: string;

  @Field(() => String)
  @Column()
  title: string;

  // @Field(() => User)
  // @ManyToOne(type  => User, user => user.documents)
  // author: User;

  // @Field(() => Object, { nullable: true })
  // // @Column()
  // author?: User;

  @Field(() => Boolean)
  @Column({ default: false })
  isPublished: boolean;

  @Field(() => ID)
  @Column({default: ""})
  authorId?: string;

  @Field()
  @Column()
  @IsBase64()
  contents: string;

  @Field()
  @Column({ default:'', nullable: true })
  @IsBase64()
  merged: string;

  @IsArray()
  @Max(300,{each: true})
  @IsPositive({each: true})
  @ArrayUnique()
  @ArrayNotEmpty()
  @ArrayMinSize(4)
  @ArrayMaxSize(4)
  @Column("integer", { default: [1, 2, 3, 4], array: true })
  @Field(() => [Number!]!)
  position: number[];

  @Field()
  @CreateDateColumn({ type: "timestamp" })
  createdAt: Date;

  @Field()
  @UpdateDateColumn({ type: "timestamp" })
  updatedAt: Date;

  @Field()
  @VersionColumn()
  version: number;

  @Field(() => String)
  @Column({ default: '', nullable: true })
  signature: string;

}

babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "plugin-proposal-decorators": {"legacy": true}
      }
    ]
  ],
}

next.config.js

module.exports = {
  webpack: (config,  { buildId, dev, isServer, defaultLoaders, webpack, typescript }) => {

    config.experiments = {
    topLevelAwait: true,
    };
    return config
  },
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es2018",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "experimentalDecorators": true
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

package.json

{
  "name": "apollo-server-vercel-demo",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc"
  },
  "main": "pages/index.tsx",
  "dependencies": {
    "@accounts/graphql-api": "^0.29.0",
    "@accounts/password": "^0.29.0",
    "@accounts/server": "^0.29.0",
    "@accounts/typeorm": "^0.29.0",
    "@graphql-modules/core": "^0.7.17",
    "@saeris/apollo-server-vercel": "0.3.0",
    "@types/node": "14.0.27",
    "@types/react": "16.9.46",
    "@types/react-dom": "16.9.8",
    "@zeit/next-css": "1.0.1",
    "apollo-server-express": "^2.16.1",
    "class-validator": "^0.12.2",
    "express": "^4.17.1",
    "graphql": "15.3.0",
    "graphql-subscriptions": "^1.1.0",
    "next": "9.5.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "type-graphql": "^1.0.0",
    "typescript": "3.9.7"
  },
  "license": "ISC",
  "keywords": [],
  "description": "",
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-proposal-decorators": "^7.10.5",
    "@babel/plugin-syntax-top-level-await": "^7.10.4",
    "@babel/plugin-transform-typescript": "^7.11.0",
    "@babel/preset-es2017": "^7.0.0-beta.53",
    "@babel/preset-typescript": "^7.10.4",
    "@zeit/next-typescript": "^1.1.1",
    "babel-plugin-parameter-decorator": "^1.0.16",
    "webpack": "^5.0.0-beta.28"
  },
  "resolutions": {
    "webpack": "^5.0.0-beta.28"
  }
}

Blockquote

Answer 1

this work for me

npm install --dev --save babel-plugin-transform-typescript-metadata && npm install --save-dev @babel/plugin-proposal-class-properties

create .bebelrc and add:

{
  "presets": ["next/babel"],
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  ]
}

add this in your tsconfig :

 "emitDecoratorMetadata": true,
  "experimentalDecorators": true,