title: How to enable @ experimentalDecorators in next.config.js or babelrc
body: <p>Hi if someone would help me, I wanna use @Decorators on my nextjs app, but I get the following error.</p>
  <p>Hope someone knows what Im doin wrong
  </p>
  <p><strong>Error message:</strong></p>
  <pre><code>Syntax error: Support for the experimental syntax 'decorators-legacy' isn't currently enabled:
  </code></pre>
  <p>I'm trying to use typeorm / type-graphql to generate my backend in an app subfolder.</p>
  <p><strong>app/booking/model/booking.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>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 &quot;class-validator&quot;;
    // 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(() =&gt; ID)
    @PrimaryGeneratedColumn('uuid')
    id: string;
  
    @Field(() =&gt; String)
    @Column()
    title: string;
  
    // @Field(() =&gt; User)
    // @ManyToOne(type  =&gt; User, user =&gt; user.documents)
    // author: User;
  
    // @Field(() =&gt; Object, { nullable: true })
    // // @Column()
    // author?: User;
  
    @Field(() =&gt; Boolean)
    @Column({ default: false })
    isPublished: boolean;
  
    @Field(() =&gt; ID)
    @Column({default: &quot;&quot;})
    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(&quot;integer&quot;, { default: [1, 2, 3, 4], array: true })
    @Field(() =&gt; [Number!]!)
    position: number[];
  
    @Field()
    @CreateDateColumn({ type: &quot;timestamp&quot; })
    createdAt: Date;
  
    @Field()
    @UpdateDateColumn({ type: &quot;timestamp&quot; })
    updatedAt: Date;
  
    @Field()
    @VersionColumn()
    version: number;
  
    @Field(() =&gt; String)
    @Column({ default: '', nullable: true })
    signature: string;
  
  }
  </code></pre>
  <p><strong>babelrc</strong></p>
  <pre><code>{
    &quot;presets&quot;: [
      [
        &quot;next/babel&quot;,
        {
          &quot;plugin-proposal-decorators&quot;: {&quot;legacy&quot;: true}
        }
      ]
    ],
  }
  </code></pre>
  <p><strong>next.config.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    webpack: (config,  { buildId, dev, isServer, defaultLoaders, webpack, typescript }) =&gt; {
  
      config.experiments = {
      topLevelAwait: true,
      };
      return config
    },
  }
  </code></pre>
  <p><strong>tsconfig.json</strong></p>
  <pre><code>
  {
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es2018&quot;,
      &quot;lib&quot;: [&quot;dom&quot;, &quot;dom.iterable&quot;, &quot;esnext&quot;],
      &quot;allowJs&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;strict&quot;: false,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;noEmit&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;jsx&quot;: &quot;preserve&quot;,
      &quot;experimentalDecorators&quot;: true
    },
    &quot;exclude&quot;: [&quot;node_modules&quot;],
    &quot;include&quot;: [&quot;next-env.d.ts&quot;, &quot;**/*.ts&quot;, &quot;**/*.tsx&quot;]
  }
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;apollo-server-vercel-demo&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;next&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start&quot;,
      &quot;type-check&quot;: &quot;tsc&quot;
    },
    &quot;main&quot;: &quot;pages/index.tsx&quot;,
    &quot;dependencies&quot;: {
      &quot;@accounts/graphql-api&quot;: &quot;^0.29.0&quot;,
      &quot;@accounts/password&quot;: &quot;^0.29.0&quot;,
      &quot;@accounts/server&quot;: &quot;^0.29.0&quot;,
      &quot;@accounts/typeorm&quot;: &quot;^0.29.0&quot;,
      &quot;@graphql-modules/core&quot;: &quot;^0.7.17&quot;,
      &quot;@saeris/apollo-server-vercel&quot;: &quot;0.3.0&quot;,
      &quot;@types/node&quot;: &quot;14.0.27&quot;,
      &quot;@types/react&quot;: &quot;16.9.46&quot;,
      &quot;@types/react-dom&quot;: &quot;16.9.8&quot;,
      &quot;@zeit/next-css&quot;: &quot;1.0.1&quot;,
      &quot;apollo-server-express&quot;: &quot;^2.16.1&quot;,
      &quot;class-validator&quot;: &quot;^0.12.2&quot;,
      &quot;express&quot;: &quot;^4.17.1&quot;,
      &quot;graphql&quot;: &quot;15.3.0&quot;,
      &quot;graphql-subscriptions&quot;: &quot;^1.1.0&quot;,
      &quot;next&quot;: &quot;9.5.2&quot;,
      &quot;react&quot;: &quot;16.13.1&quot;,
      &quot;react-dom&quot;: &quot;16.13.1&quot;,
      &quot;type-graphql&quot;: &quot;^1.0.0&quot;,
      &quot;typescript&quot;: &quot;3.9.7&quot;
    },
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;keywords&quot;: [],
    &quot;description&quot;: &quot;&quot;,
    &quot;devDependencies&quot;: {
      &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.10.4&quot;,
      &quot;@babel/plugin-proposal-decorators&quot;: &quot;^7.10.5&quot;,
      &quot;@babel/plugin-syntax-top-level-await&quot;: &quot;^7.10.4&quot;,
      &quot;@babel/plugin-transform-typescript&quot;: &quot;^7.11.0&quot;,
      &quot;@babel/preset-es2017&quot;: &quot;^7.0.0-beta.53&quot;,
      &quot;@babel/preset-typescript&quot;: &quot;^7.10.4&quot;,
      &quot;@zeit/next-typescript&quot;: &quot;^1.1.1&quot;,
      &quot;babel-plugin-parameter-decorator&quot;: &quot;^1.0.16&quot;,
      &quot;webpack&quot;: &quot;^5.0.0-beta.28&quot;
    },
    &quot;resolutions&quot;: {
      &quot;webpack&quot;: &quot;^5.0.0-beta.28&quot;
    }
  }
  
  </code></pre>
  <blockquote>
  <p>Blockquote</p>
  </blockquote>